Создание плавных изменений свойств элементов 


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Создание плавных изменений свойств элементов



 

6. Название свойства transition-property

7. Продолжительность перехода transition-duration

8. Функция перехода transition-timing-function

9. Задержка перехода transition-delay

10. Краткая запись перехода transition

11. Плавный переход нескольких свойств

12. Примеры переходов для различных свойств

 

2D-трансформации элементов

 

13. Функции 2D-трансформации transform

14. Точка трансформации transform-origin

15. Множественные трансформации

16. Трансформации на практике: как сделать ленточки

 

CSS3 трансформации изменяют размер, форму и положение элемента на веб-странице с помощью свойства transform. Трансформации преобразовывают элемент, не затрагивая остальные элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него. По умолчанию трансформация происходит относительно центра элемента. Трансформации не действуют на строчные элементы display: inline.

Существуют два вида CSS3 трансформаций – 2D и 3D. 2D-трансформации преобразовывают элементы в двухмерном пространстве.

 

Установка 3D-перспективы perspective

 

Свойство активирует 3D-пространство для элемента. Свойство perspective и функция perspective() добавляют глубину элементу, увеличивая его размеры по оси Z, сам элемент при этом становится визуально меньше. Чем меньше значение, тем ближе Z-пространство к зрителю и тем больше эффект, заданный с помощью свойства transform.

Если 3D-перспектива задается с помощью функции perspective(), 3D-пространство активизируется только для одного элемента. Свойство perspective активирует 3D-пространство внутри элемента, содержащего дочерние трансформированные элементы и применяется к ним. Свойство не наследуется.

 

Perspective

Значения:  
длина Задает глубину просмотра, т.е. расстояние по оси Z. Значение может быть любым положительным числом. Если единица измерения не указана, по умолчанию она считается в px. Чем больше значение, тем менее выражен эффект. 0 означает отсутствие перспективы.
none Значение по умолчанию. Означает отсутствие перспективы.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

 

ul { perspective: 500px; } li { transform: rotateX(50deg); }

 

li:hover { transform: perspective(900px) rotate3d(180,-45,0,-135deg); }

 

Задание точки трансформации для 3D элемента perspective-origin

Свойство устанавливает точку начала координат для свойства perspective. Значение по умолчанию perspective-origin: 50% 50%;. Позволяет изменять направление трансформации дочернего 3D элемента. Свойство должно использоваться вместе со свойством perspective для блока-контейнера и свойствомtransform для дочернего элемента. Не наследуется.

 

Perspective-origin

Значения:   значение по оси X/значение по оси Y Первое значение указывает положение элемента по оси X. Может задаваться в единицах длины, в % или одним из трех ключевых слов: left (эквивалентно 0% по оси X), center (эквивалентно 50% по оси X) или right (эквивалентно 100% по оси X). Второе значение указывает положение по оси Y. Задается в единицах длины, в % или одним из трех ключевых слов: top (эквивалентно 0% по оси Y), center (эквивалентно 50% по оси Y) или bottom(эквивалентно 100% по оси Y). initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Синтаксис

 

ul { perspective: 150px; perspective-origin: 10% 10%; } li { transform: rotateX(50deg); }

 

3. Стиль 3D преобразований transform-style

 

Свойство определяет, как вложенные элементы отрисовываются в трехмерном пространстве. Свойство должно использоваться вместе со свойством transform и задается только для вложенных элементов. Не наследуется.

 

Transform-style

Значения:   flat Значение по умолчанию. Все дочерние элементы отображаются плоскими в двухмерной плоскости блока-контейнера. preserve-3d Располагает элементы в трехмерном пространстве. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Синтаксис

 



Поделиться:


Читайте также:




Последнее изменение этой страницы: 2021-01-08; просмотров: 114; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.117.153.38 (0.006 с.)