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

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

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

Translate (x, y)

Сдвигает элемент на новое место, перемещая относительно изначального положения объекта вправо и вниз, используя координаты X и Y. Записывается следующим образом translate (x,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: 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)

Масштабирует элементы, делая их больше или меньше.

По умолчанию

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)

Поворачивает элементы.

По умолчанию

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)

Деформирует (наклоняет) элементы.

По умолчанию

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-трансформаций в одной.

Значение 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-трансформаций в одной.
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

Позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента.
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

Установка глубины и смена точки начала координат.
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.
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 аналога.
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.
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-трансформаций в одной.
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-пространстве.
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
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 трансформации»