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);
}