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

Что такое 2D и 3D трансформации?
С помощью 2D и 3D трансформации мы сможем сдвигать, поворачивать, масштабировать элементы и делать многое другое! Задается трансформация свойством transform и следующими значениями:
Translate (x, y)
По умолчанию
.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);}
.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);}
.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)
По умолчанию
.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);}
.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);}
.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)
По умолчанию
.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);}
.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);}
.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)
По умолчанию
.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);}
.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);}
.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);}
.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)
Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает. Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз. Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо. Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает. Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево. Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх.
.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, положительное значение — вниз, отрицательное — вверх.
.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 трансформации
.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
.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);}
.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
.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);}
.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);}
.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);}
.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)
.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);}
.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)
.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);}
.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)
.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);}
.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)
Генератор 3D матриц - http://ds-overdesign.com/transform/matrix3d.html
Множественные 3D трансформации
.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
.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);}
.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
.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;}
.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;}