С помощью 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 функции

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

Значение Описание
translate3d(tx,ty,tz) Перемещает элемент на заданную величину вдоль X, Y & Z-оси.
translateX(tx) Перемещает элемент на заданную величину вдоль оси X.
translateY(ty) Перемещает элемент на заданную величину вдоль оси Y.
translateZ(tz) Перемещает элемент на заданную величину вдоль оси Z.
rotate3d(x,y,z, a) Поворот элемента в трехмерном пространстве вокруг вектора направления [x, y, z] на угол, указанный в последнем параметре.
rotateX(a) Поворот элемента на заданный угол вокруг оси X.
rotateY(a) Поворот элемента на заданный угол вокруг оси Y.
rotateZ(a) Поворот элемента на заданный угол вокруг оси Z.
scale3d(sx,sy,sz) Масштабирует элемент на заданную величину по осям X, Y и Z. Функция scale3d(1,1,1) не имеет эффекта.
scaleX(sx) Масштабирует элемент вдоль оси X.
scaleY(sy) Масштабирует элемент вдоль оси Y.
scaleZ(sz) Масштабирует элемент вдоль оси Z.
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) Определяет трехмерное преобразование в форме матрицы преобразования 4×4 из 16 значений.
perspective(length) Определяет вид в перспективе для трехмерного преобразованного элемента. Когда значение этого свойства увеличивается, элемент будет появляться дальше от зрителя.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.