CSS 3D Transformers

Indholdsfortegnelse

Vis indholdsfortegnelse

CSS 3D Transformers

CSS understøtter også 3D-transformationer.

Hold musen over elementerne nedenfor for at se forskellen mellem en 2D og en 3D-transformation:

2D rotate

3D rotate

I dette kapitel lærer du om følgende CSS-egenskab:

transform

Browser support

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

Property
transform	36.0	10.0	16.0	9.0	23.0

CSS 3D-transformationsmetoder

Med CSS-egenskaben transform kan du bruge følgende 3D-transformationsmetoder:

rotateX()
rotateY()
rotateZ()

Metoden `rotateX()`

Metoden rotateX() roterer et element omkring dets X-akse i en given grad:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateX(150deg);
}
</style>
</head>
<body>

<h1>The rotateX() Method</h1>

<p>The rotateX() method rotates an element around its X-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

</body>
</html>

Metoden `rotateY()`

Metoden rotateY() roterer et element omkring dets Y-akse i en given grad:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateY(150deg);
}
</style>
</head>
<body>

<h1>The rotateY() Method</h1>

<p>The rotateY() method rotates an element around its Y-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

</body>
</html>

Metoden `rotateZ()`

Metoden rotateZ() roterer et element omkring dets Z-akse i en given grad:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateZ(90deg);
}
</style>
</head>
<body>

<h1>The rotateZ() Method</h1>

<p>The rotateZ() method rotates an element around its Z-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 90 degrees.
</div>

</body>
</html>

CSS-transformationsegenskaber

Følgende tabel viser alle 3D-transformationsegenskaber:

transform: Anvender en 2D- eller 3D-transformation til et element
transform-origin: Giver dig mulighed for at ændre positionen på transformerede elementer
transform-style: Angiver, hvordan indlejrede elementer gengives i 3D-rum
perspective: Angiver perspektivet på, hvordan 3D-elementer ses
perspective-origin: Angiver den nederste position af 3D-elementer
backface-visibility: Definerer, om et element skal være synligt, når det ikke vender mod skærmen

CSS 3D transformationsmetoder

matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): Definerer en 3D-transformation ved hjælp af en 4x4 matrix med 16 værdier
translate3d(x,y,z): Definerer en 3D-oversættelse
translateX(x): Definerer en 3D-oversættelse, der kun bruger værdien for X-aksen
translateY(y): Definerer en 3D-oversættelse, der kun bruger værdien for Y-aksen
translateZ(z): Definerer en 3D-oversættelse, der kun bruger værdien for Z-aksen
scale3d(x,y,z): Definerer en 3D-skalatransformation
scaleX(x): Definerer en 3D-skalatransformation ved at give en værdi for X-aksen
scaleY(y): Definerer en 3D-skalatransformation ved at give en værdi for Y-aksen
scaleZ(z): Definerer en 3D-skalatransformation ved at give en værdi for Z-aksen
rotate3d(x,y,z,angle): Definerer en 3D-rotation
rotateX(angle): Definerer en 3D-rotation langs X-aksen
rotateY(angle): Definerer en 3D-rotation langs Y-aksen
rotateZ(angle): Definerer en 3D-rotation langs Z-aksen
perspective(n): Definerer en perspektivvisning for et 3D-transformeret element

CSS 3D Transformers

Indholdsfortegnelse