Функции трансформации

Функций трансформаций довольно много и они делятся по следующим группам: поворот, масштабирование, наклон и сдвиг, а также на двухмерные и трёхмерные трансформации. Последние обозначаются добавлением 3d к имени функции. Кроме того, с помощью этих трансформаций можно делать отражение элемента, задавая отрицательные значения параметров у некоторых функций. Все функции комбинируются между собой, позволяя тем самым получить множество новых фигур.

Любая трансформация происходит относительно центральной точки элемента, её положение можно задать с помощью свойства transform-origin. Координатные оси показаны на рис. 1; оси X и Y находятся в плоскости экрана, а ось Z ему перпендикулярна.

Координатные оси

Рис. 1. Координатные оси

translate()

Сдвигает элемент на заданное значение по горизонтали и вертикали в плоскости экрана.

transform: translate(tx[, ty])

Здесь: tx — значение смещения по оси X в пикселях, процентах или других единицах CSS; ty — смещение по оси Y. Если значение ty не указано, то оно считается равным tx: translate(2) соответствует translate(2, 2).

translate3d()

Сдвигает элемент на заданное значение в трёхмерном пространстве.

transform: translate3d(tx, ty, tz)

Здесь: tx — смещение по оси X; ty — смещение по оси Y; tz — смещение по оси Z. tz не может указываться в процентах, в этом случае функция игнорируется.

translateX()

Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

translateX()

transform: translateX(tx)

translateY()

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

translateY()

transform: translateY(ty)

translateY(ty) является синонимом translate(0, ty).

translateZ()

Сдвигает элемент по оси Z в трёхмерном пространстве. Положительное значение сдвигает вперёд, отрицательное назад.

transform: translateZ(tz)

translateZ(tz) является синонимом translate3d(0, 0, tz).

scale()

Задаёт масштаб элемента по горизонтали и вертикали.

transform: scale(sx[, sy]);

Здесь: sx — изменение масштаба по оси X; sy — изменение масштаба по оси Y. Значение больше 1 увеличивает масштаб элемента, меньше 1, наоборот, его уменьшает. Если задано только одно значение, то масштабирование будет происходить пропорционально в обе стороны.

scale3d()

Масштабирует элемент в трёхмерном пространстве.

transform: scale3d(sx, sy, sz)

scaleX()

Масштабирует элемент по горизонтали.

transform: scaleX(sx);

Значение -1 отражает элемент по горизонтали (пример 1).

Пример 1. Отражение по горизонтали

Код примера скопирован в буфер

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8">
  <title>Отражение</title>
  <style>
   .mirrorX {
    transform: scaleX(-1) translateX(-20px);
   }
  </style>
 </head>
 <body>
  <img src="image/igels.png" alt="">
  <img src="image/igels.png" alt="" class="mirrorX">
 </body>
</html>

scaleX() не только отражает изображение, но и меняет направление координат. Поэтому для сдвига картинки вправо применяется отрицательное значение в функции translateX() (рис. 1).

Отражение картинки по горизонтали

Рис. 1. Отражение картинки по горизонтали

scaleY()

Масштабирует элемент по вертикали.

transform: scaleY(sy);

Значение -1 отражает элемент по вертикали (пример 2).

Пример 2. Отражение по вертикали

Код примера скопирован в буфер

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8">
  <title>Отражение</title>
  <style>
   .mirrorY {
    transform: scaleY(-1); /* Отражаем по вертикали */
    opacity: 0.2; /* Полупрозрачность */
   }
  </style>
 </head>
 <body>
  <img src="image/igels.png" alt="">
  <img src="image/igels.png" alt="" class="mirrorY">
 </body>
</html>

Результат данного примера показан на рис. 2.

Отражение картинки по вертикали

Рис. 2. Отражение картинки по вертикали

scaleZ()

Масштабирует элемент по оси Z.

transform: scaleZ(sz);

scaleZ(sz) является синонимом scale3d(1, 1, sz).

rotate()

Поворачивает элемент на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.

transform: rotate(α)

Здесь: α — угол поворота. Положительное значение поворачивает элемент по часовой стрелке, отрицательное против.

rotate3d()

Поворачивает элемент в трёхмерном пространстве без искажений. Вращающийся элемент имеет три степени свободы — оси X, Y и Z, относительно которых происходит поворот. Они задаются с помощью вектора [x, y, z] с учётом точки вращения.

transform: rotate3d(x, y, z, α)

Здесь: x — целое число описывающее координату X вектора оси вращения; y — целое число описывающее Y-координату вектора оси вращения; z — целое число описывающее координату Z вектора оси вращения; α — угол поворота. Положительное значение угла поворачивает элемент по часовой стрелке, отрицательное против.

rotateX()

Поворачивает элемент вокруг оси X на заданный угол α.

transform: rotateX(α)

rotateX(α) является синонимом rotate3D(1, 0, 0, α).

rotateY()

Поворачивает элемент вокруг оси Y на заданный угол α.

transform: rotateY(α)

rotateY(α) является синонимом rotate3D(0, 1, 0, α).

rotateZ()

Поворачивает элемент вокруг оси Z на заданный угол α.

transform: rotateZ(α)

rotateZ(α) является синонимом rotate3D(0, 0, 1, α).

skew()

Наклоняет элемент на заданное значение по горизонтали и вертикали в плоскости экрана.

transform: skew(ax[, ay])

Здесь: ax — угол наклона по оси X; ay — угол наклона по оси Y. Если значение ay не указано, то оно считается равным ax: skew(30deg) соответствует skew(30deg, 30deg).

skewX()

Наклоняет элемент на заданный угол по горизонтали. Положительное значение наклоняет влево, отрицательное вправо.

skewX()

transform: skewX(α)

Здесь: α — угол наклона по оси X. В примере 3 показано создание наклонного меню с помощью функции skewX().

Пример 3. Использование skewX()

Код примера скопирован в буфер

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Трансформация</title>
  <style>
   li {
    background: #a9c358; /* Цвет фона */
    list-style: none; /* Убираем маркеры */
    width: 300px; /* Ширина списка */
    margin-bottom: 10px; /* Отступ снизу */
    transform: skewX(-30deg); /* Наклоняем вправо */
   }
   li a {
    color: #2c285d; /* Цвет ссылок */
    text-decoration: none; /* Убираем подчёркивание */
    display: block; /* Блочные ссылки */
    padding: 5px 20px; /* Поля */
    transform: skewX(30deg); /* Наклоняем ссылки обратно */
   }
  </style>
 </head>
 <body>
  <ul>
   <li><a href="#">Пирамида Хеопса</a></li>
   <li><a href="#">Висячие сады Семирамиды</a></li>
   <li><a href="#">Статуя Зевса в Олимпии</a></li>
   <li><a href="#">Храм Артемиды в Эфесе</a></li>
   <li><a href="#">Мавзолей в Галикарнасе</a></li>
   <li><a href="#">Колосс Родосский</a></li>
   <li><a href="#">Александрийский маяк</a></li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 3. Поскольку трансформация действует на содержимое всего элемента, то ссылки внутри <li> тоже окажутся под наклоном. Нам это не требуется, поэтому ещё раз применяем функцию skewX() для <a>, но уже с противоположным знаком.

Наклон пунктов меню

Рис. 3. Наклон пунктов меню

skewY()

Наклоняет элемент на заданный угол по вертикали.

skewY()

transform: skewY(α)

Здесь: α — угол наклона по оси Y. Положительное значение наклоняет вниз, отрицательное вверх.

perspective()

Функция задаёт степень перспективы элемента в трёхмерном пространстве. Выражается расстоянием по оси Z от плоскости экрана до точки схода на линии горизонта. Чем меньше расстояние в пикселях, тем сильнее выражены искажения и наоборот.