CSS3 трансформации определяют, каким станет тот или иной блочный элемент. Трансформации преобразовывают элемент, не влияя на остальные части веб-документа, т.е. другие объекты не сдвигаются относительно него. По умолчанию трансформации происходят относительно центра элемента. Свойства не наследуются. Существуют два вида CSS3 трансформаций – 2D и 3D. 2D-трансформации, в отличие от 3D-трансформаций, имеют более широкую поддержку браузерами.

2D-трансформации элементов с помощью свойства transform

Поддержка

    IE: 10.0, 9.0 -ms-
    Firefox: 16.0, 3.5 -moz-
    Chrome: 36.0, 4.0 -webkit-
    Safari: 3.1 -webkit-
    Opera: 23.0, 15.0 -webkit-
    12.1, 10.5 -o-
    iOS Safari: 9, 7.1 -webkit-
    Opera Mini: —
    Android Browser: 44, 4.1 -webkit-
    Chrome for Android: 44

1. Точка трансформации

Свойство позволяет сместить точку, относительно которой происходит трансформация элемента. Значение по умолчанию — center, или 50% 50%

Синтаксис

div {
-ms-transform: rotate(45deg);
-ms-transform-origin: 20% 40%;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: 20% 40%;
transform: rotate(45deg);
transform-origin: 20% 40%;
}

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

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

div {transform: scaleX(2);}.

Допустимые значения:

matrix() — любое число

translate() ,translateX() ,translateY() — единицы длины (положительные и отрицательные), %

scale() ,scaleX() ,scaleY() — любое число

rotate() ,rotateX() ,rotateY() — угол (deg, grad, rad или turn)

skew() ,skewX() ,skewY() — угол (deg, grad, rad)

Примеры использования

3. Множественные трансформации

Можно объединить несколько трансформаций одного элемента, перечислив их через пробел в порядке проявления.

    div {transform: scale(1.5) rotate(-10deg);}

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

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

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

IE: 10.0
Firefox: 16.0, 10. -moz-
Chrome: 36.0, 12.0 -webkit-
Safari: 4.0 -webkit-
Opera: 23.0, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: —
Android Browser: 44, 4.1 -webkit-
Chrome for Android: 44

1. Установка 3D-перспективы

Свойство perspective активирует 3D-пространство для элемента. Оба свойства — perspective и perspective() добавляют глубину элементу, увеличивая его размеры по оси Z, сам элемент при этом становится визуально меньше. Чем меньше значение, тем ближе Z-пространство к зрителю и тем больше эффект, заданный с помощью свойства transform.

Если 3D-перспектива задается с помощью функции perspective(), 3D-пространство активизируется только для одного элемента. Свойство perspective активирует 3D-пространство внутри элемента, содержащего дочерние трансформированные элементы и применяется к ним. Свойство не наследуется.

Синтаксис

    ul {
-webkit-perspective: 500px;
perspective: 500px;
}
li {
-webkit-transform: rotateX(50deg);
transform: rotateX(50deg);
}

2. Задание точки трансформации для 3D элемента

Свойство perspective-origin устанавливает начало координат для свойства perspective. Значение по умолчанию perspective-origin: 50% 50%;. Позволяет изменять направление трансформации дочернего 3D элемента. Свойство должно использоваться вместе со свойством perspective для блока-контейнера и свойством transform для дочернего элемента. Не наследуется.

Синтаксис

    ul {
-webkit-perspective: 150px;
-webkit-perspective-origin: 10% 10%;
perspective: 150px;
perspective-origin: 10% 10%;
}
li {
-webkit-transform: rotateX(50deg);
transform: rotateX(50deg);
}

3. Стиль 3D преобразований

Синтаксис

    div {
-webkit-transform: rotateY(60deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(60deg);
transform-style: preserve-3d;
}

4. Видимость обратной стороны элемента

Свойство backface-visibility указывает, будет ли видна пользователю обратная сторона преобразованного элемента. У непреобразованного элемента к пользователю обращена передняя сторона. Не наследуется.

Синтаксис

    div {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

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

Свойство transform задает вид как 2D, так и 3D преобразований элемента. Описывается с помощью функций трансформации, перечисленных в таблице ниже. Не наследуется.

синтаксис

    div {
-webkit-transform: rotateX(150deg);
transform: rotateX(150deg);
}