CSS transform. 2D и 3D трансформации // «Фрилансер по жизни»

Что такое 2D и 3D трансформации?

С помощью 2D и 3D трансформации мы сможем сдвигать, поворачивать, масштабировать элементы и делать многое другое! Задается трансформация свойством transform и следующими значениями:

Translate (x, y)

Сдвигает элемент на новое место, перемещая относительно изначального положения объекта вправо и вниз, используя координаты X и Y. Записывается следующим образом translate (x,y).
0, 0по умолчанию
30px, 30px
30%, -10%

По умолчанию

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: translate(0px, 0px);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: translate(30px, 30px);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: translate(30%, -10%);

}

Scale (x, y)

Масштабирует элементы, делая их больше или меньше.
1, 1по умолчанию
0.5, 0.2
2

По умолчанию

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: scale(1, 1);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: scale(0.5, 0.2);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: scale(2);

}

Rotate (n + deg)

Поворачивает элементы.
0degпо умолчанию
45degпо часовой
-10degпротив часовой

По умолчанию

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotate(0deg);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotate(45deg);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotate(-10deg);

}

Skew (x + deg, y + deg)

Деформирует (наклоняет) элементы.
0deg, 0degпо умолчанию
10deg, 10deg
0deg, -10deg
20deg

По умолчанию

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: skew(0deg,0deg);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: skew(10deg,10deg);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: skew(0deg,-10deg);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: skew(20deg);

}

Matrix (a, c, b, d, x, y)

Позволяет объединить несколько функций 2D-трансформаций в одной.
1, 0, 0, 1, 0, 0по умолчанию
0.5, 0.1, 0.1, 0.5, 10, 15

Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает. Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз. Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо. Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает. Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево. Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх.

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: matrix(1, 0, 0, 1, 0, 0);

}

Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает. Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз. Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо. Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает. Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево. Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх.

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: matrix(0.5, 0.1, 0.1, 0.5, 10, 15);

}

Множественные 2D трансформации

Позволяет объединить несколько функций 2D-трансформаций в одной.
translate + rotate + scale
CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: translate(30px, 30px) rotate(45deg) scale(0.8);

}

Transform-origin

Позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента.
center (50% 50%) по умолчанию
top left (0 0)
CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform-origin:center; transform: rotate(45deg);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2);

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform-origin:top left; transform: rotate(45deg);

}

Perspective, perspective-origin

Установка глубины и смена точки начала координат.
perspective: 0 по умолчанию
perspective: 400px
perspective-origin: center (50% 50%)по умолчанию
perspective-origin:left top (0 0)
CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2); perspective: 0;

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateX(45deg);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2); perspective: 400px;

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateX(45deg);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2); perspective: 400px; perspective-origin: center;

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateX(45deg);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2); perspective: 400px; perspective-origin: 0 0;

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateX(45deg);

}

Translate3d (x, y, z)

По аналогии со своим 2D братом, это значение задает перемещение элемента, но в 3D-пространстве. Помимо оси X и Y добавляется ось Z.
0, 0, 0по умолчанию
30px, 30px, 30px
CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2); perspective: 400px;

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2); perspective: 400px;

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: translate3d(30px, 30px, 30px);

}

Scale3d (x, y, z)

Задает трехмерное масштабирование по одной из осей X Y Z. Фактически повторяет функционал своего 2d аналога.
1, 1, 1по умолчанию
1.5, 1.5, 1.5
CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2); perspective: 400px;

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: scale3d(1, 1, 1);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2); perspective: 400px;

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: scale3d(1.5, 1.5, 1.5);

}

Rotate3d (x, y, z, deg)

Вращает элемент относительно трех осей. Элемент поворачивается под углом, задаваемым последним параметром относительно вектора направления x,y,z.
1, 1, 1, 0degпо умолчанию
1, 1, 1, 45deg
CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2); perspective: 400px;

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotate3d(1, 1, 1, 0deg);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2); perspective: 400px;

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotate3d(1, 1, 1, 45deg);

}

Matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Задает трехмерное преобразование как однородную матрицу размером 4×4 с шестнадцатью значениями в столбцах.

Генератор 3D матриц - http://ds-overdesign.com/transform/matrix3d.html

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

Позволяет объединить несколько функций 3D-трансформаций в одной.
translate3d + rotate3d
CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2); perspective:400px;

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: translate3d(30px, 30px,30px) rotate3d(1,1,1,30deg);

}

Transform-style

Определяет, как дочерние элементы должны отображаться в 3D-пространстве.
flat по умолчанию
preserve-3d
CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2); perspective:400px; transform-style:flat;

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateY(30deg);

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2); perspective:400px; transform-style:preserve-3d;

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateY(30deg);

}

Backface-visibility

Отображение обратной стороны объекта.
visible по умолчанию
hidden
visible
CSS код:
/* стили оболочки */ /* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2); perspective:400px;

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateY(150deg); backface-visibility: visible;

}

CSS код:
/* стили оболочки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.2); perspective:400px;

}

/* стили блока */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateY(150deg); backface-visibility: hidden;

}

Шпаргалка является дополнением к выпуску «CSS transform // 2D и 3D трансформации»