Style transform-eigenschap

Definitie en gebruik

transform De eigenschap past 2D of 3D transformaties toe op het element. Deze eigenschap stelt u in staat om het element te draaien, te zoomen, te verplaatsen, te hellen, enz.

Zie ook:

CSS Referentiemanual:transform-eigenschap

Voorbeeld

Roteer het div-element:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

Probeer het zelf uit

Syntaxis

Retourneer de transform-eigenschap:

object.style.transform

Stel de transform-eigenschap in:

object.style.transform = "none|transform-functions|initial|inherit"

Attribuutwaarde

Waarde Beschrijving
none Definieer geen convertering.
matrix(n, n, n, n, n, n) Definieer een tweedimensionale convertering met een matrix van zes waarden.
matrix3d(n, n, n, n, etc....) Gebruik een 4x4 matrix met 16 waarden om een 3D convertering te definiëren.
translate(x, y) Definieer een 2D translatie.
translate3d(x, y, z) Definieer een 3D translatie.
translateX(x) Definieer een translatie, gebruik alleen de waarde van de X-as.
translateY(y) Definieer een translatie, gebruik alleen de waarde van de Y-as.
translateZ(z) Definieer een 3D translatie, gebruik alleen de waarde van de Z-as.
scale(x, y) Definieer een 2D proportieconvertering
scale3d(x, y, z) Definieer een 3D proportieconvertering.
scaleX(x) Definieer een proportieconvertering door een waarde voor de X-as te geven.
scaleY(y) Definieer een proportieconvertering door een waarde voor de Y-as te geven.
scaleZ(z) Definieer een 3D proportieconvertering door een waarde voor de Z-as te geven.
rotate(hoek) Definieer een 2D draaiing, waarbij de hoek in de parameters wordt vastgesteld.
rotate3d(x, y, z, hoek) Definieer een 3D draaiing.
rotateX(hoek) Definieer een 3D draaiing langs de X-as.
rotateY(hoek) Definieer een 3D draaiing langs de Y-as.
rotateZ(hoek) Definieer een 3D draaiing langs de Z-as.
skew(x-hoek, y-hoek) Definieer een 2D hellingsconvertering langs de X-as en Y-as.
skewX(hoek) Definieer een 2D hellingsconvertering langs de X-as.
skewY(hoek) Definieer een 2D hellingsconvertering langs de Y-as.
perspective(n) Definieer de perspectief van een 3D-converterelement.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Inherit deze eigenschap van de ouderlijke element. inherit.

Technische details

Standaardwaarde: geen
terugkeerwaarde: een string die de transform-eigenschap.
CSS-versie: CSS3

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0