базовый курс

ГРУППА КУРСА

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

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

Вращение

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

transform: rotate(угол)

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

Стиль:

+
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<style>
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, которые по отдельности устанавливают горизонтальное и вертикальное перемещение.

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(искажение)