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

Функция 3D-преобразования CSS3 позволяет преобразовывать элементы в трёхмерном пространстве.

3D-преобразование элементов

Использование функции 3D-преобразования CSS3 позволяет выполнять базовые преобразования элементов в трёхмерном пространстве, такие как перемещение, вращение, масштабирование и наклон.

Элементы, прошедшие преобразование, не влияют на окружающие элементы, но могут быть перетянуты, как элементы с абсолютной позиционировкой. Однако, преобразованные элементы все еще занимают место в макете в своем исходном положении (не преобразованные).

Использование функций преобразования CSS и Transform()

Атрибут transform CSS3 использует функции трансформации для манипулирования координатной системой элемента, чтобы применить эффект трансформации.

Следующие части описывают функции 3D-трансформаций:

Функция translate3d()

Функция rotation3d() вращает элемент в 3D-пространстве вокруг вектора направленности [x, y, z] с точки круга на указанный угол. Это можно записать как rotate(vx, vy, vz, angle).

Пример

.container {
　　　　width: 125px;
　　　　height: 125px;
　　　　perspective: 500px;
　　　　border: 4px solid #e5a043;
　　　　background: #fff2dd;
}
.transformed {
　　　　-webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */
　　　　transform: translate3d(25px, 25px, 50px);　
}

Функция translate3d(25px, 25px, 50px) перемещает изображение в положительном направлении по осям X и Y на 25 пикселей и в положительном направлении по оси Z на 50 пикселей.

3D-трансформации используют трёхмерную координатную систему, но движение по направлению Z не всегда заметно, так как эти элементы существуют в двумерной плоскости (плане) и не имеют глубины.

Используя CSS-атрибуты perspective и perspective-origin, можно добавить глубину сцене, делая элементы, находящиеся на Z-оси выше (т.е. ближе к наблюдателю), выглядеть больше, а элементы, удалённые от наблюдателя, – меньше.

Функция rotate3d()

Функция rotate3d() вращает элемент в 3D-пространстве вокруг вектора направленности [x, y, z] на указанный угол. Она может быть записана как rotate(vx, vy, vz, angle).

.container{
　　　　width: 125px;
　　　　height: 125px;
　　　　perspective: 300px;
　　　　border: 4px solid #a2b058;
　　　　background: #f0f5d8;
}
.transformed {
　　　　-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
　　　　transform: rotate3d(0, 1, 0, 60deg);　
}

Функция rotate3d(0, 1, 0, 60deg) вращает изображение вокруг оси Y на 60 градусов. Вы также можете использовать отрицательные значения для вращения элемента в противоположном направлении.

Функция scale3d()

Функция scale3d() изменяет размер элемента. Она может быть записана как scale(sx, sy, sz). В отсутствие сочетания с другими функциями трансформации, такими как вращение и透视, эффект этой функции не слишком заметен, как показано в следующем примере.

.container{
　　　　width: 125px;
　　　　height: 125px;
　　　　perspective: 300px;
　　　　border: 4px solid #6486ab;
　　　　background: #e9eef3;
}
.transformed {
　　　　-webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */
　　　　transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg);　
}

Функция scale3d(1, 1, 2) масштабирует элемент по оси Z, функция rotate3d(1, 0, 0, 60deg) вращает изображение на 60 градусов по оси X.

Функция matrix3d()

Функция matrix3d() может выполнять все 3D-преобразования за один раз, например, трансляцию, вращение и масштабирование. Она использует 4x4 преобразовательМатрицаФорма 16 параметров.

Это пример выполнения 3D-преобразований с использованием функции matrix3d().

.container{
　　　　width: 125px;
　　　　height: 125px;
　　　　perspective: 300px;
　　　　border: 4px solid #d14e46;
　　　　background: #fddddb;
}
.transformed {
　　　　-webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); /* Chrome, Safari, Opera */
　　　　transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);　
}

Однако, при выполнении нескольких преобразований за один раз, удобнее использовать одну функцию преобразования и перечислять их по порядку, как показано ниже:

.container{
　　　　width: 125px;
　　　　height: 125px;
　　　　perspective: 300px;
　　　　border: 4px solid #a2b058;
　　　　background: #f0f5d8;
}
.transformed {
　　　　-webkit-transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* Chrome, Safari, Opera */
　　　　transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2);　
}

Функции 3D-трансформации

В таблице ниже кратко описаны все функции 3D-трансформации.