Свойство transform — применяет трансформацию к элементу (можно применить несколько трансформаций, задавая значения через пробел).
Элемент можно передвигать, масштабировать, поворачивать и наклонять.
Допустимые значения
- none — элемент не трансформируется
- <функция> — элемент трансформируется согласно одной из следующих функций:
- matrix(<число>, <число>, <число>, <число>, <число>, <число>) — определяет матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат
- matrix3d(<число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>) — определяет 3d матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат
- translate(<значение>) — определяет сдвиг элемента. Можно задать два сдвига, через запятую: первый по оси x, второй по оси y. Если задано только одно значение, сдвиг по оси y будет равен 0
- translate3d(<значение>, <значение>, <значение>) — определяет сдвиг элемента по оси x, по оси y и по оси z
- translateX(<значение>) — определяет сдвиг элемента по оси x
- translateY(<значение>) — определяет сдвиг элемента по оси y
- translateZ(<значение>) — определяет сдвиг элемента по оси z
- scale(<число>) — определяет масштабирование элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, масштаб по оси y будет равен масштабу по оси x
- scale3d(<число>, <число>, <число>) — определяет масштаб элемента по оси x, по оси y и по оси z
- scaleX(<число>) — определяет масштаб элемента по оси x
- scaleY(<число>) — определяет масштаб элемента по оси y
- scaleZ(<число>) — определяет масштаб элемента по оси z
- rotate(<угол>) — определяет поворот элемента на заданный угол относительно центра поворота, заданного свойством transform-origin
- rotate3d(<число>, <число>, <число>, <угол>) — определяет поворот элемента на заданный угол по направлению вектора, заданного первыми тремя параметрами. Элемент поворачивается относительно точки, заданной свойством transform-origin
- rotateX(<число>) — определяет угол поворота элемента по оси x
- rotateY(<число>) — определяет угол поворота элемента по оси y
- rotateZ(<число>) — определяет угол поворота элемента по оси z
- skew(<угол>) — определяет наклон элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, наклон по оси y будет равен 0
- skewX(<угол>) — определяет угол наклона элемента по оси x.
- skewY(<угол>) — определяет угол наклона элемента по оси y.
- perspective(<глубина>) — расстояние в пикселях от зрителя до плоскости z = 0.
Поддержка браузеров
 IE |
 Opera |
 Chrome |
 Firefox |
 Safari |
|---|---|---|---|---|
| Internet Explorer 10 9 -ms- |
Opera 12 и выше 10.5 -o- |
Chrome 4 и выше 2 -webkit- |
Firefox 16 и выше 3.5 -moz- |
Safari 4 и выше 3.1 -webkit- |
Свойство transform-origin — задает координаты центра трансформации.
Элемент можно передвигать, масштабировать, поворачивать и наклонять относительно точки с заданными координатами.
Допустимые значения
- <значение> — абсолютное значение расстояния от левого верхнего угла элемента в плоскости 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% по обеим осям
Поддержка браузеров
| IE |
Opera |
Chrome |
Firefox |
Safari |
|---|---|---|---|---|
| Internet Explorer 10 9 -ms- |
Opera 12 и выше 10.5 -o- |
Chrome 4 и выше 2 -webkit- |
Firefox 16 и выше 3.5 -moz- |
Safari 4 и выше 3.1 -webkit- |
Свойство transition — сокращенный способ задать свойства перехода transition-property, transition-duration,transition-timing-function и transition-delay, позволяет одновременно задать свойство, к изменению которого будет применен плавный переход, время, в течение которого этот переход будет совершаться, способ расчета промежуточных значений перехода и задержку перед переходом.
Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.
Допустимые значения
- допустимые значения смотрите в свойствах transition-property, transition-duration, transition-timing-function и transition-delay
Свойство transition-property
задает свойство, для которого будет совершаться анимированный переход. Можно указать несколько через запятую. Например transition-property:width,height.
Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.
Допустимые значения
- none — анимированный переход совершаться не будет
- all — анимированный переход будет совершаться для всех изменяющихся свойств
- <свойство> — имя свойства, для которого будет совершаться анимированный переход
Свойство transition-duration
указывает какое количество времени занимает анимированный переход (можно указать несколько через запятую).
Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.
Допустимые значения
- <значение> — точное значение времени перехода. Задается в секундах s или в миллисекундах ms
Свойство transition-timing-function
Свойство transition-timing-function описывает метод расчета промежуточных значений свойств при анимированном переходе (можно указать несколько через запятую).
Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.
Допустимые значения
Возможные значения свойства представляют собой различные кривые Безье третьего порядка, заданные координатами четырех точек. Координаты начальной точки P0(0;0), координаты конечной точки P3(1;1). Координаты промежуточных точек P1(x1;y1) P2(x2;y2) заданны четырьмя значениями свойства в порядке (x1;y1;x2;y2). Координаты могут принимать значения от 0 до 1.- ease — кривая Безье 3-го порядка с координатами P1(0.25, 0.1) P2(0.25, 1.0)
- linear — кривая Безье 3-го порядка с координатами P1(0.0, 0.0) P2(1.0, 1.0)
- ease-in — кривая Безье 3-го порядка с координатами P1(0.42, 0) P2(1.0, 1.0)
- ease-out — кривая Безье 3-го порядка с координатами P1(0, 0) P2(0.58, 1.0)
- ease-in-out — кривая Безье 3-го порядка с координатами P1(0.42, 0) P2(0.58, 1.0)
- cubic-bezier (<число>, <число>, <число>, <число>) — кривая Безье 3-го порядка с координатами P1(x1, y1) P2(x2, y2).Где x1,y1,x2,y2 — произвольные значения координат заданные пользователем (в промежутке от 0 до 1).
Для получения значений cubic-bezier можно использоватьгенератор transition-timing-function: cubic-bezier
и второй вариант CSS cubic-bezier Builder
Свойство transition-delay
указывает на временную задержку перед анимированным переходом (можно указать несколько через запятую).
Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.
Допустимые значения
- <значение> — точное значение временной задержки перед переходом. Задается в секундах s или в миллисекундах ms
Поддержка браузеров
| IE |
Opera |
Chrome |
Firefox |
Safari |
|---|---|---|---|---|
| Internet Explorer Ишак не поддерживает |
Opera 12 и выше 10.5 -o- |
Chrome 4 и выше 2 -webkit- |
Firefox 16 и выше 4 -moz- |
Safari 4 и выше 3.1 -webkit- |
