CSS
2D-omvandlingar

Syntax

• Rotera omformning
• transform: rotera (<angle>)
• Översätt Transform
• transform: translate (<length-or-percentage> [, <length-or-percentage>]?)
• transform: translateX (<length-or-percentage>)
• transform: translateY (<length-or-percentage>)
• Skew Transform
• transform: skew (<angle> [, <angle>]?)
• transform: skewX (<angle>)
• transform: skewY (<angle>)
• Skala Transform
• transform: skala (<skala-faktor> [, <skala-faktor>]?)
• transform: skalaX (<skala-faktor>)
• transform: skalaY (<skala-faktor>)
• Matrix Transform
• transform: matris (<nummer> [, <nummer>] {5,5})

parametrar

Anmärkningar

-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);

Rotera

html

<div class="rotate"></div>

CSS

.rotate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: rotate(45deg);
}

Detta exempel roterar div med 45 grader medurs. Rotationscentret är i mitten av div, 50% från vänster och 50% från toppen. Du kan ändra rotationscentrumet genom att ställa in egenskapen för transform-origin .

transform-origin: 100% 50%;

Exemplet ovan kommer att ställa in rotationscentret på mitten av höger sida.

Skala

html

<div class="scale"></div>

CSS

.scale {
    width: 100px;
    height: 100px;
    background: teal;
    transform: scale(0.5, 1.3);
}

Detta exempel 100px * 0.5 = 50px div till 100px * 0.5 = 50px på X-axeln och till 100px * 1.3 = 130px på Y-axeln.

Transformans centrum är i divets centrum, 50% från vänster och 50% från toppen.

Översätt

html

<div class="translate"></div>

CSS

.translate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: translate(200px, 50%);
}

Detta exempel kommer att flytta div med 200px på X-axeln och med 100px * 50% = 50px på Y-axeln.

Du kan också ange översättningar på en enda axel.

På X-axeln:

.translate {
    transform: translateX(200px);
}

På Y-axeln:

.translate {
    transform: translateY(50%);
}

Skev

html

<div class="skew"></div>

CSS

.skew {
    width: 100px;
    height: 100px;
    background: teal;
    transform: skew(20deg, -30deg);
}

Detta exempel kommer att skeva div med 20 grader på X-axeln och med - 30 grader på Y-axeln.
Transformans centrum är i divets centrum, 50% från vänster och 50% från toppen.

Se resultatet här .

Flera omvandlingar

Flera omvandlingar kan tillämpas på ett element i en egenskap som denna:

transform: rotate(15deg) translateX(200px);

Detta roterar elementet 15 grader medurs och översätter det sedan 200px till höger.

I kedjade transformationer rör sig koordinatsystemet med elementet . Detta betyder att översättningen inte kommer att vara horisontell men på en axel rotera 15 grader medsols som visas i följande bild:

Om du ändrar ordningen på transformerna ändras utgången. Det första exemplet kommer att vara annorlunda än

transform: translateX(200px) rotate(15deg);

<div class="transform"></div>

.transform {
  transform: rotate(15deg) translateX(200px);
}

Som visas på denna bild:

Transform Origin

Transformationer görs med avseende på en punkt som definieras av egenskapen transform-origin .

Egenskapen har två värden: transform-origin: XY;

I följande exempel roterar den första div ( .tl ) runt det övre vänstra hörnet med transform-origin: 0 0; och den andra ( .tr ) transformeras runt det övre högra hörnet med transform-origin: 100% 0 . Rotationen tillämpas på svävaren :

HTML:

<div class="transform originl"></div>
<div class="transform origin2"></div>

CSS:

.transform {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: teal;
    transition: transform 1s;
}

.origin1 {
    transform-origin: 0 0;
}

.origin2 {
    transform-origin: 100% 0;
}

.transform:hover {
    transform: rotate(30deg);
}

Standardvärdet för egenskapen transform-origin är 50% 50% vilket är elementet i mitten.