CSS трансформация

Свойство transform осуществляет CSS трансформацию элемента. Оно имеет много значений, и каждое значение производит свой вид трансформации.

Вращение

Один из видов трансформации - вращение элемента.

transform: rotate(угол)

Вращение происходит по часовой стрелке. Угол указывается в градусах. После числа нужно без пробела написать ключевое слово deg. Создадим блок, к которому далее применим вращение:

Стиль:

7
8
9
10
11
12
13

div
  {
  margin: 20px 0 0 100px;
  border: 1px solid Red;
  width: 320px;
  height: 50px;
  }

HTML код:

17	<div id="rotate">Вращение блока</div>

Я задал блоку id, но стиль указал для тегов <div>, потому что на страницу будут добавлены другие блоки. Теперь произведём вращение блока:

Стиль:

14
15
16
17

#rotate
  {
  transform: rotate(5deg);
  }

ВАЖНО: При трансформации элемент не освобождает пространство для нового положения, а перекрывает другие элементы, как при позиционировании.

Осью вращения является центр элемента. Свойство transform-origin позволяет указать другое положение оси.

Это свойство устанавливает точку, относительно которой происходит трансформация. Для вращения - это ось вращения. В значении свойства указывается положение точки по оси X, потом через пробел положение точки по оси Y.

По оси X бывают значения: left, center, right.

По оси Y бывают значения: top, center, bottom.

Также смещение точки можно указать в единицах измерения CSS и в процентах. Расстояние отсчитывается от левого верхнего угла элемента.

Укажем это свойство блоку:

17	transform-origin: left center;

Перемещение

CSS трансформация даёт возможность переместить элемент относительно его положения в потоке.

transform: translate(горизонтальное смещение, вертикальное смещение)

Смещение указывается в единицах измерения CSS. При положительных значениях перемещение происходит вправо и вниз, а при отрицательных влево и вверх.

Добавим ещё один блок и применим к нему перемещение:

Стиль:

19
20
21
22

#move
  {
  transform: translate(50px, -30px);
  }

HTML код:

27	<div id="move">Перемещение блока</div>

Существуют значения, которые по отдельности устанавливают горизонтальное и вертикальное перемещение.

transform: translateX(смещение)

transform: translateY(смещение)

Смещение указывается точно также.

Изменение размеров

CSS трансформация позволяет менять размеры элемента.

transform: scale(X, Y)

X - число, на которое умножается ширина элемента.

Y - число, на которое умножается высота элемента.

Добавим на страницу блок и изменим его размеры:

Стиль:

27
28
29
30

#size
  {
  transform: scale(1.5, 0.6);
  }

HTML код:

37	<div id="size">Изменение размеров</div>

Если указать отрицательное число, то получится зеркальное отображение элемента.

Текст

Пример:

Стиль:

31
32
33
34

#pr
  {
  transform: scale(-1, 1);
  }

HTML код:

42	<div id="pr">Зеркальное отображение</div>

Есть значения для отдельного изменения ширины и высоты.

transform: scaleX(цифра)

transform: scaleY(цифра)

Искажение

Можно осуществить искажение элемента. При этом стороны элемента сдвигаются вдоль осей координат.

transform: skew(искажение по оси X, искажение по оси Y)

Искажение указывается в градусах. Можно указать только первое значение. Тогда искажения по оси Y не будет.

Пример:

Стиль:

14
15
16
17

#skew
  {
  transform: skew(10deg, 10deg);
  }

HTML код:

32	<div id="skew">Искажение блока</div>

Есть значения свойства transform, которые отдельно искажают элемент по оси X и по оси Y.

transform: skewX(искажение)

transform: skewY(искажение)