Руководство по 3D transform-функциям в CSS3

С помощью CSS3-функции трехмерного преобразования transform вы можете выполнять базовые манипуляции с преобразованием, такие как перемещение, вращение, масштабирование и наклон элементов в трехмерном пространстве.

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

Использование CSS3 Transform

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

Теперь рассмотрим функции трехмерного преобразования:

Функция translate3d()

Функция перемещает элемент из его текущей позиции в новую вдоль оси X, Y и Z. Это можно записать как translate(tx, ty, tz). Значения в процентах не допускаются для третьего параметра (т.е. для tz).

.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); /* Standard syntax */
}

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

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

Свойства CSS perspective и perspective-origin можно использовать для добавления ощущения глубины, делая элементы выше по оси Z, то есть ближе к пользователю. Они кажутся большими, а те, которые находятся дальше от зрителя, кажутся меньшими.

Функция rotate3d()

Функция rotate3d() вращает элемент в трехмерном пространстве на заданный угол вокруг вектора направления [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); /* Standard syntax */
}

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

Функция scale3d()

Функция scale3d() изменяет размер элемента. Это может быть записано как scale(sx, sy, sz). Эффект этой функции неочевиден, если вы не используете его в сочетании с другими функциями преобразования, такими как поворот (rotate) и перспектива (perspective), как показано в примере ниже.

.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); /* Standard syntax */
}

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

Функция matrix3d()

Функция matrix3d() может выполнять все трехмерные преобразования, такие как translate(), rotate(), и scale() одновременно. Она принимает 16 параметров в виде матрицы 4×4.

Вот пример выполнения 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); /* Standard syntax */
}

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

.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); /* Standard syntax */
}

3D Transform функции

В следующей таблице приведен краткий обзор всех функций трехмерного преобразования.