Ben's Hobbyhoekje -- Over CSS transform

Over CSS transform

CSS beschikt over een groot aantal mogelijkheden om beweging aan je webdocument toe te voegen. Het gaat daarbij om het laten bewegen van dingen, het veranderen van kleuren, enz. De aanpak daarvoor is beschreven in andere items op deze site:
• Over @keyframes (en animation)
• Over transitions
• Over de CSS-eigenschap filter

Deze pagina gaat over het gebruiken van transform. Daarmee verander je de grootte, de plaats en de stand van objecten.

transform is er in twee smaken: 2D en 3D. Bij 2D blijft het element in het vlak van het beeldscherm. Bij 3D kan het element uit het vlak van het scherm bewegen, bijvoorbeeld bij rotatie om de horizontale of verticale as van het scherm.

De syntax is: transform: function()
Er zijn veel mogelijkheden die je kunt gebruiken voor function(). Die worden hieronder besproken.

Vrijwel elk blok-element in HTML kan worden getransformeerd. Bij sommige elementen kan dat niet of is het zinloos. Denk daarbij aan <body>
Om voor jezelf een en ander goed te begrijpen, is het handig om alleen <div>-elementen te transformeren. Alles wat binnen zo'n <div>-tag ligt wordt mee-getransformeerd in 2D, in 3D kun je kiezen hoe met de 'kinderen' van het getransformeerde element wordt omgegaan.

Elke transformatie heeft een oorsprong. Die ligt per default halverwege de lengte en breedte van het element en in het vlak van het beeldscherm. Bij een rechthoek is dat het snijpunt van de diagonalen.
Je kunt de oorsprong verplaatsten met behulp van transform-origin: x_t y_t z_t.
De parameters x_t en y_t geef je het beste op in procenten, maar pixels kan ook. De parameter z_t geef je op in pixels.
Voor x_t kun je ook de keywords left, center en right gebruiken. De betekenis spreekt voor zich. Voor y_t zijn er de keywords top, center en bottom.

transform-origin rekent vanaf de linkerbovenhoek van het (rechthoekige) element. De derde parameter is alleen nodig voor 3D-transformaties.
Feitelijk verplaats je hiermee de lokale X- en Y-as van het element. (Naar rechts en naar beneden is positief). Bij 3D-transformaties kun je ook de Z-as verplaatsen. De oorsprong ligt dan voor of achter het vlak van het beeldscherm.
Default-waarden: transform-origin: 50% 50% 0px.
transform-origin heeft alleen invloed op transform.

Hieronder een overzicht van de 2D-transform functions.

*Naam*		*Betekenis*
translate(x,y)		Definieert een translatie (verplaatsing) over een afstand x,y.
translateX(x)		Definieert een translatie over een afstand x in de richting van de X-as.
translateY(y)		Definieert een translatie over een afstand y in de richting van de Y-as.
rotate(α)		Definieert een rotatie (verdraaiing) over een hoek α.
scale(x,y)		Definieert een schaling (vergroting/verkleining). Schaalfactor x is voor de X-richting, y is voor de Y-richting.
ScaleX(x)		Definieert een schaling (vergroting/verkleining) met factor x, in de richting van de X-as.
scaleY(y)		Definieert een schaling (vergroting/verkleining) met factor y, in de richting van de Y-as.
skew(xα,yα)		Definieert scheeftrekken. De X-richting wordt verdraaid over een hoek xα. De Y-richting wordt verdraaid over een hoek yα.
skewX(xα)		Definieert scheeftrekken. De X-richting wordt verdraaid over een hoek xα. De Y-richting blijft onveranderd.
skewY(yα)		Definieert scheeftrekken. De Y-richting wordt verdraaid over een hoek yα. De X-richting blijft onveranderd.
matrix(a,b,c,d,e,f)		Definieert een transformatie die bestaat uit een combinatie van skew, scale() en translate().De betekenis van de parameters is als volgt: • `a: scaleX(x)` • `b: skewX(xα)` • `c: skewY(yα)` • `d: scaleY(y)` • `e: translateX(x)` • `f: translateY(y)` N.B.: Eenvoudig is in te zien dat `a,d` hetzelfde is als `scale(x, y)` dat `b,c` hetzelfde is als `skew(xα, yα)` en dat `e,f` hetzelfde is als `translate(x, y)`. Een rotatie verkrijg je door skewX(xα) en skewY(yα) gelijk aan elkaar te maken.

N.B. Bij alle rotaties geldt: een positieve waarde is met de klok mee.

Als je 3D-transformaties wilt gebruiken moet je dat apart aan CSS kenbaar maken. Dat doe je door het opgeven van het perspectief, ofwel het punt vanwaar naar het object wordt gekeken. CSS biedt daar twee mogelijkheden voor:
• transform: perspective(500px)
• perspective: 500px
Deze twee zijn gelijkwaardig.

Een andere belangrijke CSS-eigenschap bij 3D-transformaties is transform-style. Deze kan twee waarden hebben:
• preserve-3d. De HTML-elementen die binnen het getransformeerde element liggen (de kinderen) worden mee getransformeerd
• flat. De kinderen blijven in het vlak van het ongetransformeerde element (= het vlak van het beeldscherm).

De volgende eigenschappen kunnen je helpen om de transformaties helemaal naar je hand te zetten:
• transform-origin. Zie bij 2D-transforms voor een beschrijving van de parameters.
• perspective-origin. Legt de oorsprong van de kijkrichting naar een 3D vast. Zie bij transform-origin voor een beschrijving.
• backface-visibility. Definieert of de achterkant van een element zichtbaar is of niet, bijvoorbeeld na het omkeren van een foto.

Hier onder een overzicht van de 3D-transform functions.

*Naam*		*Betekenis*
translate3d(x,y,z)		Definieert een 3D-translatie, translatievector is (x, y, z)
translateX(x)		Definieert een 3D-translatie in de richting van de X-as, translatievector is (x, 0, 0)
translateY(y)		Definieert een 3D-translatie in de richting van de Y-as, translatievector is (0, y, 0)
translateZ(z)		Definieert een 3D-translatie in de richting van de Z-as, translatievector is (0, 0, z)
scale3d(x,y,z)		Definieert een 3D-schaling, schaalfactoren zijn x, y en z.
scaleX(x)		Definieert een 3D-schaling in de richting van de X-as, schaalfactoren zijn x, 1 en 1.
scaleY(y)		Definieert een 3D-schaling in de richting van de Y-as, schaalfactoren zijn 1, y en 1.
scaleZ(z)		Definieert een 3D-schaling in de richting van de Z-as, schaalfactoren zijn 1, 1 en z.
rotate3d(x,y,z,α)		Definieert een 3D-rotatie om de as van de oorsprong naar het punt (x, y, z). α is de rotatiehoek.
rotateX(α)		Definieert een 3D-rotatie over de hoek α om de X-as.
rotateY(α)		Definieert een 3D-rotatie over de hoek α om de Y-as.
rotateZ(α)		Definieert een 3D-rotatie over de hoek α om de Z-as.
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)		Definieert een 3D-transformatie in de vorm van een 4×4-matrix: `\|a1 a2 a3 a4\| \|b1 b2 b3 b4\| \|c1 c2 c3 c4\| \|d1 d2 d3 d4\|` De betekenis van de matrix-elementen is: • `a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,d4` beschrijven de lineaire transformatie (rotatie en schaling). • `a4,b4,c4` beschrijven de translatie. Het is niet eenvoudig om aan te geven wat elke parameter betekent, omdat die het product is van drie 4×4 matrices: [translatie]·[schaling]·[rotatie].

Bronnen:
w3schools.com, sitepoint.com, The Art of Web.