Синтаксис
| div { backface-visibility: hidden; } |
Функции 3D трансформации transform
Свойство задает вид как 2D, так и 3D преобразований элемента. 3D преобразования описываются с помощью функций трансформации, перечисленных в таблице ниже. Не наследуется.
| Функция | Описание |
| matrix3d (n,n,n,n, n,n,n,n, n,n,n,n, n,n,n,n) | Функция задает трехмерное преобразование как однородную матрицу размером 4×4 с шестнадцатью значениями в столбцах. Все другие функции преобразований основаны на данной функции. |
| translate3d(x,y,z) | Функция задает перемещение элемента в 3D пространстве. Движение происходит по вектору [tx, ty, tz], где tx перемещение вдоль оси X, ty — перемещение вдоль оси Y, а tz — вдоль оси Z. Значения могут задаваться в единицах длины или в %. Отрицательные значения будут перемещать элемент в противоположном направлении. transform: translate3d(100px, 100px, -200px); transform: translate3d(50%, -100%, 10%); transform: translate3d(-100px, -30px, 50px); |
| translateZ(z) | Функция задает перемещение элемента на заданное расстояние в направлении оси Z. Значения могут задаваться в единицах длины или в %. Отрицательные значения будут перемещать элемент в противоположном направлении. transform: translateZ(300px); transform: translateZ(-50%); transform: translateZ(150%); |
| scale3d(x,y,z) | Функция задает операцию трехмерного масштабирования по вектору масштабирования [sx,sy,sz], описываемому тремя параметрами. Отрицательные значения отображают элемент зеркально вдоль трех осей. transform: scale3d(2, 1, 3); transform: scale3d(-1, -2, -1); |
| scaleZ(z) | Функция масштабирует элемент в направлении оси Z, делая его больше или меньше. В качестве значения задается число. Результат функции наиболее выражен при совместном использовании с такими функциями, как rotate() иperspective(). transform: scaleZ(3); transform: scaleZ(-1); |
| rotate3d(x,y,z,угол) | Функция вращает элемент по часовой стрелке относительно трех осей. Элемент поворачивается под углом, задаваемым последним параметром относительно вектора направления[x,y,z]. Отрицательные значения поворачивают элемент против часовой стрелки. transform: rotate3d(1, 1, 2, 45deg); |
| rotateX(угол) | Функция задает поворот по часовой стрелке под заданным углом относительно оси X. Функция rotateX(180deg) эквивалентна rotate3d(1,0,0,180deg). transform: rotateX(30deg); transform: rotateX(-135deg); |
| rotateY(угол) | Функция задает поворот по часовой стрелке под заданным углом относительно оси Y. Функция rotateY(180deg) эквивалентна rotate3d(0,1,0,180deg). transform: rotateY(30deg); transform: rotateY(-135deg); |
| rotateZ(угол) | Функция задает поворот по часовой стрелке под заданным углом относительно оси Z. Функция rotateZ(180deg) эквивалентна rotate3d(0,0,1,180deg). transform: rotateZ(30deg); transform: rotateZ(-135deg); |
| perspective(n) | Функция меняет перспективу обзора элемента, создавая иллюзию глубины. Чем больше значение функции перспективы, тем дальше от смотрящего расположен элемент. Значение должно быть больше нуля. transform: perspective(300); transform: perspective(300px); |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
|
|
| div { transform: rotateX(150deg); } |
Название свойства transition-property
Содержит название CSS-свойств, к которым будет применен эффект перехода. Не наследуется.
Transition-property
Синтаксис
