CSS tranform

Свойство transform

transform - изменяют размер, форму и положение элемента на веб-странице. Трансформации преобразовывают элемент, не затрагивая остальные элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него. По умолчанию трансформация происходит относительно центра элемента.

К элементам, которые могут быть трансформированы, относятся элементы с display: block; и display: inline-block.

Существуют два вида трансформаций – 2D и 3D.

 

property	comment
translate(x,y)	Сдвигает элемент на новое место, перемещая относительно обычного положения вправо и вниз, используя координаты X и Y, не затрагивая при этом соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения
scale(x,y)	Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально
rotate(угол)	Поворачивает элементы на заданное количество градусов, отрицательные значения от -1deg до -360deg поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) поворачивает элемент на два полных оборота
skew(x-угол, y-угол`)	Используется для деформирования (искажения) сторон элемента относительно координатных осей. Если указано одно значение, второе будет определено браузером автоматически

 

.box {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg); 
    transform: rotate(360deg);
}

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

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