CSS transform egenskab

Definition og brug

transform-egenskaben anvender 2D eller 3D-omvandling til elementet. Egenskaben giver os mulighed for at rotere, skalere, flytte eller skæve elementet.

For at bedre forstå transform-egenskaben, se denneDemonstration.

Se også:

CSS3 tutorial:CSS3 2D konvertering

CSS3 tutorial:CSS3 3D konvertering

HTML DOM reference manual:transform-egenskab

Eksempel

Roter div-element:

div
{
transform:rotate(7deg);
}

Prøv det selv

Der er flere eksempler på bunden af siden.

CSS-syntaks

transform: none|transform-funktioner;

Egenskabsværdi

Værdi Beskrivelse Test
ingen Definér ingen omvandling. Test
matrix(n,n,n,n,n,n) Definér 2D-omvandling ved brug af en matrix med seks værdier. Test
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Definér 3D-omvandling ved brug af en 4x4-matrix med 16 værdier.
translate(x,y) Definer en 2D-konvertering. Test
translate3d(x,y,z) Definer en 3D-konvertering.
translateX(x) Definer en konvertering, kun med værdien af X-aksen. Test
translateY(y) Definer en konvertering, kun med værdien af Y-aksen. Test
translateZ(z) Definer en 3D-konvertering, kun med værdien af Z-aksen.
scale(x,y) Definer en 2D-skaleringskonvertering. Test
scale3d(x,y,z) Definer en 3D-skaleringskonvertering.
scaleX(x) Definer en skaleringskonvertering ved at sætte værdien af X-aksen. Test
scaleY(y) Definer en skaleringskonvertering ved at sætte værdien af Y-aksen. Test
scaleZ(z) Definer en 3D-skaleringskonvertering ved at sætte værdien af Z-aksen.
rotate(vinkel) Definer en 2D-rotation, hvor vinklen specificeres i parameterne. Test
rotate3d(x,y,z,vinkel) Definer en 3D-rotation.
rotateX(vinkel) Definer en 3D-rotation langs X-aksen. Test
rotateY(vinkel) Definer en 3D-rotation langs Y-aksen. Test
rotateZ(vinkel) Definer en 3D-rotation langs Z-aksen. Test
skew(x-vinkel,y-vinkel) Definer en 2D-forskydning langs både X- og Y-aksen. Test
skewX(vinkel) Definer en 2D-forskydning langs X-aksen. Test
skewY(vinkel) Definer en 2D-forskydning langs Y-aksen. Test
perspective(n) Definer en perspektivvisning for 3D-transformeringselementer. Test

Tekniske detaljer

Standardværdi: ingen
Arvbarhed: nej
Version: CSS3
JavaScript syntaks: object.style.transform="rotate(7deg)"

Flere eksempler

Billedet, der er kastet på bordet
Dette eksempel viser, hvordan du opretter et 'Polaroid'-billede og roterer billedet.

Browserunderstøttelse

Numrene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Numre med -webkit-、-moz- eller -ms- som præfiks repræsenterer den første version, der bruger præfikset.

egenskab Chrome IE / Edge Firefox Safari Opera
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-