Анимация CSS3. Создание баннеров

---

Урок 6. Создание баннера службы доставки

Цель: Создать анимированный баннер 600 на 250 пикселей, применив свойство 3D трансформации.

Задачи:

• разработать статический баннер 600 на 250 пикселей;
• изучить свойства 3D трансформации;
• применить свойство perspective.

---

Изображения для выполнения данного урока размещены в папке image.
Результат работы вы можете увидеть ниже.

Задание № 1.

Создайте html-файл и добавьте в него разметку, как на рисунке 1.

Рисунок 1

Далее мы будем работать только с файлом стилей.

Также как и 2-х мерное преобразование, 3-х мерное преобразование предоставляет свойства CSS transform и transform-origin, которые применяют геометрические преобразования к элементам HTML5 в CSS3.

Функции преобразования rotate(), scale(), translate(), skew() и matrix() охватывают трехмерное пространство с параметром z координаты как в matrix3d(), и дополнительных функций, например, rotateZ() и scaleZ().

3D преобразование так же добавляет несколько новых свойств в CSS3. В дополнение к свойствам transform и transform-origin браузер с поддержкой HTML5 и префиксами понимает свойства perspective, perspective-origin, backface-visibility и flat для значения transform-style.

Функция perspective.
Функция преобразования perspective (перспектива) имеет важное значение для 3D преобразования. Без преобразования perspective нет восприятия глубины. Можно применить преобразование с перспективой к нескольким элементам, используя свойство perspective к родительским элементам. Свойство perspective применит преобразование с перспективой к каждому дочернему элементу.

Задание № 2.

Укажите первому блоку контейнеру точку перспективы. В данной лабораторной работе указано значение 100000px. Данное свойство задает нам глубину элемента, увеличивая элемент по оси Z. Ко всем дочерним элементам будет применяться это свойство.

Рисунок 2

Задание № 3.

Задайте нашему следующему блоку свойство - transform-style: preserve-3d для того, чтобы наши элементы распологались в 3D пространстве.

Задайте трансформацию при наведении на данный блок. Для этого укажите свойства трансформации translateZ(-90px) и поворот вокруг оси X на 90 градусов rotateX(90deg).

Рисунок 3

Задание № 4.

Укажите для верхней и нижней части баннера начальную трансформацию, что бы первый блок изначально стоял перед нами, а другой был спрятан внизу.
Для верхнего элемента укажите значение transform: translateZ(90px), а для нижнего элемента так же добавьте поворот на минус 90 градусов по оси X, transform: rotateX(-90deg) translateZ(135px);

Все остальные свойства элемента вы сможете написать самостоятельно, трансформаций в данном баннере больше нет.

Итоговый листинг со всеми значениями вы можете увидеть ниже.

Рисунок 4

---

Контрольное задание

Создать баннер своей фирмы, применив свойство 3D трансформации.

Также Вы можете использовать для выбора контрольного задания следующие варианты.

Вариант №1. Создать баннер на свободную тематику размером 240 на 60 пикселей.

Вариант №2. Создать баннер на свободную тематику размером 336 на 280 пикселей.

Вариант №3. Создать баннер на свободную тематику размером 240 на 400 пикселей.

Вариант №4. Реализовать баннер из 3 лабораторной, применив к нему свойства 3d трансформации.

Вариант №5. Создать баннер для интернет магазина бытовой техники.

Вариант №6. Создать баннер для фирмы, которая занимается разработкой баннеров.

Вариант №7. Создать баннер для онлайн игры.

Вариант №8. Создать баннер для дня открытых дверей.

Вариант №9. Создать баннер фирмы, которая занимается ремонтом телефонов.

Вариант №10. Создать баннер для магазина ювелирных изделий.