3D-трансформации CSS

3D-трансформации CSS

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

Пожалуйста, наведите указатель мыши на следующие элементы, чтобы увидеть различия между 2D и 3D преобразованиями:

2D rotate
3D rotate

В этой главе вы узнаете о таких CSS атрибутах:

  • transform

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

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

Атрибут Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

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

через CSS transform Атрибуты, которые вы можете использовать для 3D преобразований:

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

Метод rotateX()

Rotate X

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

Пример

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

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

Метод rotateY()

Rotate Y

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

Пример

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

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

Метод rotateZ()

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

Пример

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

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

Атрибуты CSS преобразований

В таблице ниже перечислены все атрибуты 3D преобразований:

Атрибут Описание
transform Применение 2D или 3D преобразований к элементу.
transform-origin Позволяет изменить положение преобразованного элемента.
transform-style Определяет, как вложенные элементы отображаются в 3D пространстве.
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) Определение 3D преобразования, используя только значения для оси 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) Определение 3D-обертания по оси X.
rotateY(angle) Определение 3D-обертания по оси Y.
rotateZ(angle) Определение 3D-обертания по оси Z.
perspective(n) Определение перспективного вида 3D-элемента.