CSS3 и HTML5 развиваются всё быстрее и быстрее, браузеры начинают поддерживать всё больше новых фишек и плюшек. Одно из нововведений CSS3 — cвойство transform, которое применяет трансформацию к элементу (можно применить несколько трансформаций, задавая значения через пробел). Оно позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.

Синтаксис

transform:  []* | none

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

matrix Задаёт матрицу преобразований.
rotate Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin. transform: rotate()
scale Масштаб элемента по горизонтали и вертикали. Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб. transform: scale(sx[, sy]);
scaleX Масштабирует элемент по горизонтали.transform: transform: scaleX(sx);
scaleY Масштабирует элемент по вертикали.transform: transform: scaleY(sy);
skewX Наклоняет элемент на заданный угол по вертикали.transform transform: skewX()
skewY Наклоняет элемент на заданный угол по горизонтали.transform transform: skewY()
translate Сдвигает элемент на заданное значение по горизонтали и вертикали. transform transform: translate(tx[, ty])
translateX Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.transform transform: translateX(tx)
translateY Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вверх, отрицательное вниз.transform transform: translateY(ty)

 

Множественная трансформация

Если необходимо указать несколько трансформаций, то они перечисляются через пробел

transform: rotate(15deg) translateX(230px) scale(1.5);

 

Центр трансформации

C помощью свойства transform элемент можно передвигать, масштабировать, поворачивать и наклонять относительно точки с заданными координатами. Свойство transform-origin задает координаты центра трансформации.

 

Допустимые значения transform-origin

Значение по умолчанию: 50% 50% 0

— абсолютное значение расстояния от левого верхнего угла элемента в плоскости z=0 до координат центра трансформации. Координату z можно задать только абсолютной величиной

— расстояние от левого верхнего угла элемента до координаты центра трансформации в процентах от размера элемента (координата по оси x вычисляется в процентах от ширины элемента, а координата по оси y — от высоты)

left — координата по оси x равна 0 (трансформация по оси x происходит относительно левой стороны элемента)

right — координата по оси x равна 100% или ширине элемента (трансформация по оси x происходит относительно правой стороны элемента)

top — координата по оси y равна 0 (трансформация по оси y происходит относительно верхней стороны элемента)

bottom — координата по оси y равна 100% (трансформация по оси y происходит относительно нижней стороны элемента)

center — координата по оси x равна 50% (трансформация по оси x происходит относительно центра элемента). Если перед этим значением идет значение left или right, задает координату по оси y равную 50%. Если после этого значения идет значение top или bottom, задает координату по оси x равную 50%. Если эти константы отсутствуют, задает значение равное 50% по обеим осям.

 

Поддержка браузерами

Стандартное свойство transform поддерживают:
IE 10+
Opera 12.10+
Firefox 16.0+

  • Internet Explorer 9 поддерживает нестандартное свойство -ms-transform.
  • Chrome, Safari и iOS поддерживают нестандартное свойство -webkit-transform.
  • Opera до версии 12.10 поддерживает нестандартное свойство -o-transform.
  • Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transform.

 

Пример работающего кода (этот блок будет смещен на 30 пикселей вправо, на 15 пикселей вверх и повернут на 15 градусов против часовой стрелки:

div{
    -moz-transform: translate(30px, -15px) rotate(-15deg); /* Для Firefox */
    -ms-transform: translate(30px, -15px) rotate(-15deg); /* Для IE */
    -webkit-transform: translate(30px, -15px) rotate(-15deg); /* Для Safari, Chrome, iOS */
    -o-transform: translate(30px, -15px) rotate(-15deg); /* Для Opera */
    transform: translate(30px, -15px) rotate(-15deg);
}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *