Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Создание плавных изменений свойств элементов
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
Синтаксис
ul { perspective: 150px; perspective-origin: 10% 10%; } li { transform: rotateX(50deg); } |
3. Стиль 3D преобразований transform-style
Свойство определяет, как вложенные элементы отрисовываются в трехмерном пространстве. Свойство должно использоваться вместе со свойством transform и задается только для вложенных элементов. Не наследуется.
Transform-style
Синтаксис
| Поделиться: |
Читайте также:
Последнее изменение этой страницы: 2021-01-08; просмотров: 114; Нарушение авторского права страницы; Мы поможем в написании вашей работы!
infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.117.153.38 (0.006 с.)