Просмотров: 1 440

Функции CSS для 2D трансформации

matrix(< число >, < число >, < число >, < число >, < число >, < число >)

определяет 2D трансформацию в форме трансформационной матрицы с помощью шести значений.

translate(<значение X>, <значение Y>)

определяет 2D перемещение по вектору  [tx, ty], где tx (ось X, смещение по горизонтали) и ty (ось Y, смещение по вертикали) – первый и второй параметры для перемещения элемента. Если ty не указывается, то задается нулевое значение.

<div style="width:150px; height:150px; background:#fafafa;">Блок контейнер
<div style="width:150px; height:150px; background:#ccc; transform:translate(15px,15px);">
 Блок для перемещения
</div>
</div>

translate css

translateX(<translation-value>)

определяет перемещение элемента по оси X

translateY(<translation-value>)

определяет перемещение элемента по оси Y

scale(<число>)

<div style="width:500px; margin:auto">
<div style="width:150px; height:150px; background:#fafafa;">Блок 1</div>
<div style="width:150px; height:150px; background:#ccc; transform:scale(1.5,1.5);">
 Блок для масштабирования
</div>
</div>

scale css

определяет 2D масштаб, на который нужно трансформировать элемент. Возможна трансформация по оси X и Y параметры [sx,sy] соответственно. Если второй параметр не задан, он принимает значение равное первому.

Например, scale(1, 1) оставит элемент без изменений. scale(2, 2) – увеличит геометрические размеры элементы в два раза.

scaleX(<число>)

определяет операцию 2D трансформирования используя [sx,1] вектор масштабирования.

scaleY(<число>)

определяет операцию 2D трансформирования используя [1,sy] вектор масштабирования.

rotate(<угол>)

<div style="width:500px; margin:auto">
<div style="width:150px; height:150px; background:#fafafa;">Блок 1</div>
<div style="width:150px; height:150px; background:#ccc; transform:rotate(45deg);">
 Блок для поворота
</div>
</div>

rotate css

определяет 2D вращение элемента на определенный угол, который определяется в параметре, заданном свойством transform-origin.

Например, rotate(90deg) повернет элемент на одну четверть в направлении по часовой стрелки.

skew(<угол>)

<div style="width:500px; margin:auto">
<div style="width:150px; height:150px; background:#fafafa;">Блок 1</div>
<div style="width:150px; height:150px; background:#ccc; transform:skew(45deg);">
 Блок для смещения
</div>
</div>

skew css

Определяет 2D смещение по осям X и Y [ax,ay]. Если второй параметр не задается, он принимает значение нуля.

Обратите внимание, что «смещения»  будет применятся к элементу несколько раз, если его повторно использовать для элемента.

skewX(<угол>)

Определяет 2D смещение по оси X на заданный угол.

 skewY(<угол>)

Определяет 2D смещение по оси Y на заданный угол.