CSS 3D transformace

Obsah

Zobrazit obsah

CSS 3D transformace

CSS také podporuje 3D transformace.

Přejetím myší na prvky níže uvidíte rozdíl mezi 2D a 3D transformace:

2D rotate

3D rotate

V této kapitole se dozvíte o následující vlastnosti CSS:

transform

Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která tuto vlastnost plně podporuje.

Property
transform	36.0	10.0	16.0	9.0	23.0

CSS 3D transformační metody

Pomocí vlastnosti CSS transform můžete použít následující metody 3D transformace:

rotateX()
rotateY()
rotateZ()

Metoda `rotateX()`

Metoda rotateX() otočí prvek kolem jeho osy X v daném stupni:

Příklad

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

Zkuste to sami →

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

Metoda `rotateY()`

Metoda rotateY() otočí prvek kolem jeho osy Y v daném stupni:

Příklad

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

Zkuste to sami →

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

Metoda `rotateZ()`

Metoda rotateZ() otočí prvek kolem jeho osy Z v daném stupni:

Příklad

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

Zkuste to sami →

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

Vlastnosti transformace CSS

V následující tabulce jsou uvedeny všechny vlastnosti 3D transformace:

transform: Aplikuje na prvek 2D nebo 3D transformaci
transform-origin: Umožňuje změnit polohu na transformovaných prvcích
transform-style: Určuje, jak se vnořené prvky vykreslují ve 3D prostoru
perspective: Určuje perspektivu zobrazení 3D prvků
perspective-origin: Určuje spodní polohu 3D prvků
backface-visibility: Definuje, zda má být prvek viditelný, když není otočený k obrazovce

CSS 3D transformační metody

matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): Definuje 3D transformaci pomocí matice 4x4 s 16 hodnotami
translate3d(x,y,z): Definuje 3D překlad
translateX(x): Definuje 3D posun pomocí pouze hodnoty pro osu X
translateY(y): Definuje 3D posun pomocí pouze hodnoty pro osu Y
translateZ(z): Definuje 3D posun pomocí pouze hodnoty pro osu Z
scale3d(x,y,z): Definuje transformaci 3D měřítka
scaleX(x): Definuje 3D transformaci měřítka zadáním hodnoty pro osu X
scaleY(y): Definuje 3D transformaci měřítka zadáním hodnoty pro osu Y
scaleZ(z): Definuje 3D transformaci měřítka zadáním hodnoty pro osu Z
rotate3d(x,y,z,angle): Definuje 3D rotaci
rotateX(angle): Definuje 3D rotaci podél osy X
rotateY(angle): Definuje 3D rotaci podél osy Y
rotateZ(angle): Definuje 3D rotaci podél osy Z
perspective(n): Definuje perspektivní pohled pro 3D transformovaný prvek

CSS 3D transformace

Obsah