CSS
2D-transformaties

Syntaxis

• Roteer Transformeren
• transform: rotate (<hoek>)
• Vertaal Transformeren
• 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 (<hoek>)
• transform: skewY (<hoek>)
• Scale Transform
• transform: scale (<scale-factor> [, <scale-factor>]?)
• transform: scaleX (<scale-factor>)
• transform: scaleY (<scale-factor>)
• Matrix transformatie
• transform: matrix (<nummer> [, <nummer>] {5,5})

parameters

Opmerkingen

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

Draaien

HTML

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

CSS

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

In dit voorbeeld wordt de div 45 graden rechtsom gedraaid. Het rotatiecentrum bevindt zich in het midden van de div, 50% van links en 50% van boven. U kunt het rotatiecentrum wijzigen door de eigenschap transform-origin in te stellen.

transform-origin: 100% 50%;

In het bovenstaande voorbeeld wordt het rotatiecentrum ingesteld op het midden van het rechteruiteinde.

Schaal

HTML

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

CSS

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

In dit voorbeeld wordt de div geschaald naar 100 100px * 0.5 = 50px op de X-as en naar 100 100px * 1.3 = 130px op de Y-as.

Het midden van de transformatie bevindt zich in het midden van de div, 50% van links en 50% van boven.

Vertalen

HTML

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

CSS

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

In dit voorbeeld wordt de div verplaatst met 100px * 50% = 50px op de X-as en met 100 100px * 50% = 50px op de Y-as.

U kunt ook vertalingen op een enkele as opgeven.

Op de X-as:

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

Op de Y-as:

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

scheef

HTML

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

CSS

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

In dit voorbeeld wordt de div scheefgetrokken met 20 graden op de X-as en met - 30 graden op de Y-as.
Het midden van de transformatie bevindt zich in het midden van de div, 50% van links en 50% van boven.

Zie het resultaat hier .

Meerdere transformaties

Meerdere transformaties kunnen worden toegepast op een element in één eigenschap zoals deze:

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

Dit roteert het element 15 graden met de klok mee en vertaalt het 200 px naar rechts.

In geketende transformaties beweegt het coördinatensysteem met het element mee . Dit betekent dat de vertaling niet horizontaal is maar op een as 15 graden rechtsom draait, zoals weergegeven in de volgende afbeelding:

Als u de volgorde van de transformaties wijzigt, wordt de uitvoer gewijzigd. Het eerste voorbeeld zal anders zijn dan

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

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

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

Zoals getoond in deze afbeelding:

Transform Origin

Transformaties worden uitgevoerd met betrekking tot een punt dat wordt gedefinieerd door de eigenschap transform-origin .

De eigenschap heeft 2 waarden: transform-origin: XY;

In het volgende voorbeeld roteert de eerste div ( .tl ) rond de linkerbovenhoek met transform-origin: 0 0; en de tweede ( .tr ) wordt om de rechterbovenhoek transform-origin: 100% 0 met transform-origin: 100% 0 . De rotatie wordt toegepast bij zweven :

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);
}

De standaardwaarde voor de eigenschap transform-origin is 50% 50% , het centrum van het element.