CSS 3D-transformers

Innehållsförteckning

Visa innehållsförteckning

CSS 3D-transformers

CSS stöder även 3D-transformationer.

För muspekaren över elementen nedan för att se skillnaden mellan en 2D och en 3D-transformation:

2D rotate

3D rotate

I det här kapitlet kommer du att lära dig om följande CSS-egenskap:

transform

Webbläsarstöd

Siffrorna i tabellen anger den första webbläsarversionen som fullt ut stöder egenskapen.

Property
transform	36.0	10.0	16.0	9.0	23.0

CSS 3D-omvandlingsmetoder

Med CSS-egenskapen transform kan du använda följande 3D-transformationsmetoder:

rotateX()
rotateY()
rotateZ()

Metoden `rotateX()`

Metoden rotateX() roterar ett element runt sin X-axel i en given grad:

Exempel

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

Prova själv →

<!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() roterar ett element runt dess Y-axel i en given grad:

Exempel

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

Prova själv →

<!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() roterar ett element runt sin Z-axel i en given grad:

Exempel

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

Prova själv →

<!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-transformegenskaper

Följande tabell listar alla 3D-transformegenskaper:

transform: Tillämpar en 2D- eller 3D-transformation på ett element
transform-origin: Låter dig ändra positionen på transformerade element
transform-style: Anger hur kapslade element renderas i 3D-rymden
perspective: Anger perspektivet på hur 3D-element visas
perspective-origin: Anger bottenpositionen för 3D-element
backface-visibility: Definierar om ett element ska vara synligt när det inte är vänt mot skärmen

CSS 3D-omvandlingsmetoder

matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): Definierar en 3D-transformation med hjälp av en 4x4-matris med 16 värden
translate3d(x,y,z): Definierar en 3D-översättning
translateX(x): Definierar en 3D-översättning och använder endast värdet för X-axeln
translateY(y): Definierar en 3D-översättning och använder endast värdet för Y-axeln
translateZ(z): Definierar en 3D-översättning och använder endast värdet för Z-axeln
scale3d(x,y,z): Definierar en transformation i 3D-skala
scaleX(x): Definierar en 3D-skaltransformation genom att ange ett värde för X-axeln
scaleY(y): Definierar en 3D-skaltransformation genom att ge ett värde för Y-axeln
scaleZ(z): Definierar en 3D-skaltransformation genom att ange ett värde för Z-axeln
rotate3d(x,y,z,angle): Definierar en 3D-rotation
rotateX(angle): Definierar en 3D-rotation längs X-axeln
rotateY(angle): Definierar en 3D-rotation längs Y-axeln
rotateZ(angle): Definierar en 3D-rotation längs Z-axeln
perspective(n): Definierar en perspektivvy för ett 3D-transformerat element

CSS 3D-transformers

Innehållsförteckning