CSS 3D transzformációk

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

CSS 3D transzformációk

A CSS támogatja a 3D átalakításokat is.

Vigye az egeret az alábbi elemek fölé a 2D közötti különbség megtekintéséhez és egy 3D transzformáció:

2D rotate
3D rotate

Ebben a fejezetben a következő CSS-tulajdonságokat ismerheti meg:

  • transform

Böngésző támogatás

A táblázatban szereplő számok az első böngészőverziót adják meg, amely teljes mértékben támogatja a tulajdonságot.

Property
transform 36.0
 10.0
 16.0
 9.0
 23.0

CSS 3D átalakítási módszerek

A CSS transform tulajdonságával használható a következő 3D transzformációs módszerek:

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

A rotateX() módszer

A rotateX() metódus adott mértékben elforgat egy elemet az X tengelye körül:

Példa

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

Próbálja ki Ön is →

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

A rotateY() módszer

A rotateY() metódus adott mértékben elforgat egy elemet az Y tengelye körül:

Példa

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

Próbálja ki Ön is →

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

A rotateZ() módszer

A rotateZ() metódus adott mértékben elforgat egy elemet a Z tengelye körül:

Példa

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

Próbálja ki Ön is →

<!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 átalakítás tulajdonságai

Az alábbi táblázat felsorolja az összes 3D átalakítási tulajdonságot:

transform

2D vagy 3D transzformációt alkalmaz egy elemre

transform-origin

Lehetővé teszi az átalakított elemek pozíciójának megváltoztatását

transform-style

Meghatározza, hogy a beágyazott elemek hogyan jelenjenek meg a 3D térben

perspective

Meghatározza a 3D-s elemek megtekintésének perspektíváját

perspective-origin

Meghatározza a 3D elemek alsó pozícióját

backface-visibility

Meghatározza, hogy egy elem látható legyen-e, ha nem a képernyő felé néz

CSS 3D átalakítási módszerek

matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

3D transzformációt határoz meg, 16 értékből álló 4x4-es mátrix használatával

translate3d(x,y,z)

3D fordítást határoz meg

translateX(x)

3D fordítást határoz meg, csak az X tengely értékét használva

translateY(y)

3D fordítást határoz meg, csak az Y tengely értékét használva

translateZ(z)

3D fordítást határoz meg, csak a Z-tengely értékét használva

scale3d(x,y,z)

3D léptékű transzformációt határoz meg

scaleX(x)

3D léptékű transzformációt határoz meg az X-tengely értékének megadásával

scaleY(y)

Egy 3D léptékű transzformációt határoz meg az Y tengely értékének megadásával

scaleZ(z)

3D léptékű transzformációt határoz meg a Z-tengely értékének megadásával

rotate3d(x,y,z,angle)

3D elforgatást határoz meg

rotateX(angle)

3D forgatást határoz meg az X tengely mentén

rotateY(angle)

3D elforgatást határoz meg az Y tengely mentén

rotateZ(angle)

3D-s elforgatást határoz meg a Z tengely mentén

perspective(n)

Perspektivikus nézetet határoz meg egy 3D-s átalakított elemhez