Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ: Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрации Техника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ? Влияние общества на человека Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления	Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ CSS3 3D трансформации элементов Стр 1 из 3Следующая ⇒ CSS3 3D трансформации элементов Содержание:   1. Установка 3D перспективы perspective 2. Задание точки трансформации для 3D элемента perspective-origin 3. Стиль 3D преобразований transform-style 4. Видимость обратной стороны элемента backface-visibility 5. Функции 3D трансформации   Создание плавных изменений свойств элементов   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 Наследует значение свойства от родительского элемента.

Синтаксис

 

div { transform: rotateY(60deg); transform-style: preserve-3d; }

Backface-visibility

Значения:   visible Значение по умолчанию. Указывает, что обратная сторона видна. hidden Скрывает обратную сторону элемента. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Синтаксис

 

div { backface-visibility: hidden; }

Синтаксис

 

div { transform: rotateX(150deg); }

 

Transition-property

Значения:   none Отсутствие свойства для перехода. all Значение по умолчанию. Применяет эффект перехода ко всем свойствам элемента. свойство Определяет список css-свойств, перечисленных через запятую, участвующих в переходе. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Синтаксис

 

div { width: 100px; -webkit-transition-property: width; transition-property: width; } div:hover { width: 300px; }

Transition-duration

Значения:   время Время перехода указывается в секундах или миллисекундах, например,2s или 5ms. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Синтаксис

 

div { -webkit-transition-duration: 5s; transition-duration: 5s; }

Transition-timing-function

Значения:   ease Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1). linear Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1). ease-in Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1). ease-out Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1). ease-in-out Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1). cubic-bezier(x1, y1, x2, y2) Позволяет вручную установить значения от 0 до 1 для кривой ускорения. На этом сайте вы сможете построить любую траекторию перехода. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Синтаксис

 

div { -webkit-transition-timing-function: linear; transition-timing-function: linear; }

Transition-delay

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

Синтаксис

 

div { -webkit-transition-delay:.5s; transition-delay:.5s; }

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

 

Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition

 

{transition: transition-property transition-duration transition-timing-function transition-delay;}

Если воспользоваться значениями по умолчанию, то запись

 

div {transition: 1s;}

будет эквивалентна

 

div {transition: all 1s ease 0s;}

Синтаксис

 

div { -webkit-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); }

Наведите курсор мыши на блоки, чтобы посмотреть функции трансформации в действии.

 

Синтаксис

 

div { -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); -webkit-transform-origin:20%40%; -ms-transform-origin:20%40%; transform-origin:20%40%; }

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

Можно объединить несколько трансформаций одного элемента, перечислив их через пробел в порядке проявления.

 

div {transform:scale(1.5)rotate(-10deg);}

 

CSS3 3D трансформации элементов

Содержание:

 

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

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

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

4. Видимость обратной стороны элемента backface-visibility

5. Функции 3D трансформации