CSS 3D transformations

CSS 3D transformations

CSS stöder också 3D-omvandlingar.

Håll muspekaren över elementen nedan för att se skillnaden mellan 2D och 3D-omvandlingar:

2D rotate
3D rotate

I detta kapitel kommer du att lära dig följande CSS-egenskaper:

  • transform

Webbläsarstöd

Tal i tabellen anger den första webbläsaren som fullständigt stöder egenskapen.

Egenskap Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 3D transformationmetoder

genom CSS transform Egenskap, du kan använda följande 3D transformationmetoder:

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() metod

Rotera X

rotateX() Metoden roterar elementet runt dess X-axel med en given vinkel:

Exempel

#myDiv {
  transform: rotateX(150deg);
}

Prova själv

rotateY() metod

Rotera Y

rotateY() Metoden roterar elementet runt dess Y-axel med en given vinkel:

Exempel

#myDiv {
  transform: rotateY(130deg);
}

Prova själv

rotateZ() metod

rotateZ() Metoder för att rotera elementet runt dess Z-axel med en given vinkel:

Exempel

#myDiv {
  transform: rotateZ(90deg);
}

Prova själv

CSS transformationsegenskaper

Nedan är en lista över alla 3D transformationsegenskaper:

Egenskap Beskrivning
transform tillämpa 2D eller 3D transformation på elementet.
transform-origin Tillåter dig att ändra positionen för det konverterade elementet.
transform-style Definiera hur inbäddade element visas i 3D-rummet.
perspective Definiera perspektiveffekten för ett 3D-element.
perspective-origin Bestäm positionen för botten av ett 3D-element.
backface-visibility Definiera om elementet är synligt när det inte är riktat mot skärmen.

CSS 3D transformationmetoder

Funktion Beskrivning
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 Definiera 3D transformation, använda en 4x4-matris med 16 värden.
translate3d(x,y,z) Definiera 3D transformation.
translateX(x) Definiera 3D transformation, endast använda värden för X-axeln.
translateY(y) Definiera 3D transformation, endast använda värden för Y-axeln.
translateZ(z) Definiera 3D transformation, endast använda värden för Z-axeln.
scale3d(x,y,z) Definiera 3D skalningstransformation.
scaleX(x) Definiera 3D skalningstransformation genom att ange ett värde för X-axeln.
scaleY(y) Definiera 3D skalningstransformation genom att ange ett värde för Y-axeln.
scaleZ(z) Definiera 3D skalningstransformation genom att ange ett värde för Z-axeln.
rotate3d(x,y,z,angle) Define 3D rotation.
rotateX(angle) Define 3D rotation along the X-axis.
rotateY(angle) Define 3D rotation along the Y-axis.
rotateZ(angle) Define 3D rotation along the Z-axis.
perspective(n) Define the perspective view of 3D transformation elements.