CSS 3D-преобразования

CSS также поддерживает 3D-преобразования.

Наведите курсор на элементы ниже, чтобы увидеть разницу между 2D-изображением. и 3D-преобразование:

2D rotate

3D rotate

В этой главе вы узнаете о следующем свойстве CSS:

transform

Поддержка браузера

Цифры в таблице указывают первую версию браузера, полностью поддерживающую это свойство.

Property
transform	36.0	10.0	16.0	9.0	23.0

Методы CSS 3D-преобразований

С помощью свойства CSS transform вы можете использовать следующие методы 3D-преобразования:

rotateX()
rotateY()
rotateZ()

Метод `rotateX()`

Метод rotateX() вращает элемент вокруг оси X на заданный угол:

Пример

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

Попробуйте сами →

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

Метод `rotateY()`

Метод rotateY() вращает элемент вокруг оси Y на заданный угол:

Пример

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

Попробуйте сами →

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

Метод `rotateZ()`

Метод rotateZ() вращает элемент вокруг оси Z на заданный угол:

Пример

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

Попробуйте сами →

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

В следующей таблице перечислены все свойства 3D-преобразования:

transform: Применяет 2D- или 3D-преобразование к элементу.
transform-origin: Позволяет менять положение трансформируемых элементов.
transform-style: Указывает, как вложенные элементы отображаются в трехмерном пространстве.
perspective: Определяет перспективу просмотра 3D-элементов.
perspective-origin: Определяет нижнее положение 3D-элементов.
backface-visibility: Определяет, должен ли элемент быть виден, когда он не обращен к экрану.

Методы CSS 3D-преобразования

matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): Определяет 3D-преобразование с использованием матрицы 4x4 из 16 значений.
translate3d(x,y,z): Определяет 3D-перевод
translateX(x): Определяет 3D-перенос, используя только значение для оси X.
translateY(y): Определяет трехмерный перевод, используя только значение оси Y.
translateZ(z): Определяет 3D-перенос, используя только значение оси Z.
scale3d(x,y,z): Определяет преобразование 3D-масштаба.
scaleX(x): Определяет преобразование 3D-масштаба, задавая значение для оси X.
scaleY(y): Определяет преобразование 3D-масштаба, задавая значение для оси Y.
scaleZ(z): Определяет преобразование 3D-масштаба, задавая значение для оси Z.
rotate3d(x,y,z,angle): Определяет 3D-вращение
rotateX(angle): Определяет трехмерное вращение вдоль оси X.
rotateY(angle): Определяет трехмерное вращение вдоль оси Y.
rotateZ(angle): Определяет трехмерное вращение вдоль оси Z.
perspective(n): Определяет вид в перспективе для преобразованного в 3D элемента.

CSS 3D-преобразования

Оглавление