С помощью 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) Определяет вид в перспективе для трехмерного преобразованного элемента. Когда значение этого свойства увеличивается, элемент будет появляться дальше от зрителя.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

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

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

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

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