CSS 3D-omforming

CSS 3D-omforming

CSS understøtter også 3D konverteringer.

Klik på elementerne nedenfor for at se forskellen mellem 2D og 3D konverteringer:

2D rotate
2D rotate

3D rotate

  • transform

I dette kapitel vil du lære følgende CSS egenskaber:

Browserunderstøttelse

Egenskab Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben. IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 3D konverteringsmetoder

ved CSS transform Egenskab, du kan bruge følgende 3D konverteringsmetoder:

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

rotateX() metode

Rotér X

rotateX() Metode til at rotere elementet om sin X-akse med en given vinkel:

Eksempel

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

Prøv det selv

rotateY() metode

Rotér Y

rotateY() Metode til at rotere elementet om sin Y-akse med en given vinkel:

Eksempel

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

Prøv det selv

rotateZ() metode

rotateZ() Metode til at rotere elementet om sin Z-akse med en given vinkel:

Eksempel

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

Prøv det selv

CSS konverteringsegenskaber

Følgende tabel viser alle 3D konverteringsegenskaber:

Egenskab Beskrivelse
transform Anvend 2D eller 3D konvertering på elementet.
transform-origin Tillader dig at ændre positionen for det konverterede element.
transform-style Definer, hvordan indlejrede elementer vises i 3D-ruumet.
perspective Definer perspektiveffekten for 3D-elementet.
perspective-origin Bestem positionen for bunden af 3D-elementet.
backface-visibility Definer om elementet er synligt, når det ikke er vendt mod skærmen.

CSS 3D konverteringsmetoder

Funktion Beskrivelse
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 Definer 3D konvertering, ved brug af en 4x4 værdimatrix med 16 værdier.
translate3d(x,y,z) Definer 3D konvertering.
translateX(x) Definer 3D konvertering, kun ved hjælp af værdierne til X-akslen.
translateY(y) Definer 3D konvertering, kun ved hjælp af værdierne til Y-akslen.
translateZ(z) Definer 3D konvertering, kun ved hjælp af værdierne til Z-akslen.
scale3d(x,y,z) Definer 3D skaleringskonvertering.
scaleX(x) Definer 3D skaleringskonvertering, ved at angive en værdi for X-akslen.
scaleY(y) Definer 3D skaleringskonvertering, ved at angive en værdi for Y-akslen.
scaleZ(z) Definer 3D skaleringskonvertering, ved at angive en værdi for Z-akslen.
rotate3d(x,y,z,vinkel) Definer 3D-rotasjon.
rotateX(vinkel) Definer 3D-rotasjon langs X-aksen.
rotateY(vinkel) Definer 3D-rotasjon langs Y-aksen.
rotateZ(vinkel) Definer 3D-rotasjon langs Z-aksen.
perspective(n) Definer perspektivvisjonen for 3D-omformingskomponenter.