Синтаксис
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
Синтаксис
| Поделиться: |
Читайте также:
Последнее изменение этой страницы: 2021-01-08; просмотров: 86; Нарушение авторского права страницы; Мы поможем в написании вашей работы!
infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.135.190.232 (0.006 с.)