Style transform-egenskapen

Definition och användning

transform Egenskapen tillämpar 2D eller 3D-omvandling på elementet. Denna egenskap låter dig rotera, skalera, flytta, luta och mer på elementet.

Se också:

CSS Referenshandbok:transform-egenskap

Exempel

Rotera div-elementet:

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

Prova det själv

Syntaks

Returnera transform-egenskap:

object.style.transform

Ställ in transform-egenskap:

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

Egenskapsvärde

Värde Beskrivning
none Definiera att det inte bör finnas någon omvandling.
matrix(n, n, n, n, n, n) Använd en matris med sex värden för att definiera tvådimensionell omvandling.
matrix3d(n, n, n, n, etc....) Använd en 4x4-matris med 16 värden för att definiera 3D-omvandling.
translate(x, y) Definiera 2D-translationsrörelse.
translate3d(x, y, z) Definiera 3D-translationsrörelse.
translateX(x) Definiera translationsrörelse, använd endast X-axelns värde.
translateY(y) Definiera translationsrörelse, använd endast Y-axelns värde.
translateZ(z) Definiera 3D-translationsrörelse, använd endast Z-axelns värde.
scale(x, y) Definiera 2D-proportionsomvandling
scale3d(x, y, z) Definiera 3D-proportionsomvandling.
scaleX(x) Definiera proportioner genom att ge ett värde till X-axeln.
scaleY(y) Definiera proportioner genom att ge ett värde till Y-axeln.
scaleZ(z) Definiera 3D-proportionsomvandling genom att ge ett värde till Z-axeln.
rotate(vinkel) Definiera 2D-rotation, specificera vinkeln i parametrarna.
rotate3d(x, y, z, vinkel) Definiera 3D-rotation.
rotateX(vinkel) Definiera 3D-rotation längs X-axeln.
rotateY(vinkel) Definiera 3D-rotation längs Y-axeln.
rotateZ(vinkel) Definiera 3D-rotation längs Z-axeln.
skew(x-vinkel, y-vinkel) Definiera 2D-sidledsfalling omvandling längs X- och Y-axeln.
skewX(vinkel) Definiera 2D-sidledsfalling omvandling längs X-axeln.
skewY(vinkel) Definiera 2D-sidledsfalling omvandling längs Y-axeln.
perspective(n) Definiera perspektiv för 3D-omvandlingselement.
initial Sätt detta egenskap till dess standardvärde. Se initial.
inherit Inherriter detta egenskap från föräldrelementet. Se inherit.

Tekniska detaljer

Standardvärde: Ingen
Returvärde: en sträng som anger elementets transform-egenskap.
CSS-version: CSS3

Webbläsarstöd

Talen i tabellen anger den första version av webbläsaren som helt stöder detta egenskap.

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