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

---

Урок 1. Трансформация

Цель: изучить применение свойства transform.

Задачи:

• изучить функцию перемещения элемента translate();
• изучить функцию масштабирования элемента scale();
• изучить функцию вращения элемента rotate();
• изучить функцию искажения элемента skew().

---

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

Функция перемещения (сдвига) - translate()

Сдвигает элемент на заданное значение по горизонтали и вертикали в плоскости экрана.

transform: translate(tx, ty)

Здесь:
tx — значение смещения по оси X в пикселях, процентах или других единицах CSS;
ty — смещение по оси Y. Если значение ty не указано, то оно считается равным 0: translate(60px) соответствует translate(60px, 0).

Синтаксис:
transform: translate(50px, 0) РАВНОСИЛЬНО transform: translate(50px)
transform: translate(0, -50px) //сдвиг вверх на 50px
transform: translate(100px, 50px) //сдвиг вправо на 100px и вниз на 50px
transform: translate(-3%)) //сдвиг влево на 3%

Задание №1

1. Создайте html файл.

2. Создайте в данном файле блок с квадратом, для которого мы будем применять трансформацию, т.е. напишите код из рисунка 1.

Рисунок 1

3. Создайте css файл, в котором пропишете стили для нашего квардрата (рисунок 2). В дальнейшем, в этом же файле, будем прописывать свойства трансформации.

Рисунок 2

В результате у вас должен получиться блок, который вы можете увидеть на рисунке 3.

Рисунок 3

3. При помощи элемента translate(), функции transform, сделаем так, что бы при наведении курсора мыши квадрат уходил вниз на 50px.
Для этого в нашем файле стилей укажем псевдокласс :hover для нашего стиля .kvadrat (рисунок 4).

Рисунок 4

Примечание: префиксы -o-; -ms-; -moz-;-webkit- позволяют настроить свойства для конкретного браузера, так как без использования данных префиксов некоторые свойства могут отображаться не корректно.

4. Так же в стиле .kvadrat есть свойство transition: 2s; (позволяет делать плавные переходы между двумя значениями какого-либо CSS-свойства), чтобы квадрат спускался плавно в течении двух секунд.

5. Если вы сделали всё правильно, то при наведении курсора на квадрат должна получиться анимация, как на рисунке 5.

Рисунок 5

6. Сохраните файл с результатом под названием lab1_transform.html

Функция масштабирования – scale()

Задаёт масштаб элемента по горизонтали и вертикали.

transform: scale(sx, sy);

Здесь:
sx — изменение масштаба по оси X;
sy — изменение масштаба по оси Y.
Значение больше 1 увеличивает масштаб элемента, меньше 1, наоборот, его уменьшает.
Если задано только одно значение, то масштабирование будет происходить пропорционально в обе стороны: scale(1.2) соответствует scale(1.2, 1.2).
Отрицательные значения отзеркаливают элемент.

Синтаксис:
transform: scale(3, 1]); //увеличение ширины в 3 раза
transform: scale(1, 0.5); //уменьшение высоты в 2 раза
transform: scale(1.5); //увеличение размера в 1,5 раза

Задание №2

В данном задании изучим элемент scale(), который позволяет увеличить или уменьшить элемент.

1. В этом же файле lab1_transform.html создайте квадрат аналогичный квадрату из первого задания с классом kvadrat2.

3. Увеличим его при наведении при помощи элемента scale(). Пусть в нашем задании увеличиваются только верхнии и нижнии границы, при этом в ширину он остается такой же.
Для этого укажем значение scaleY(1.7). Реализуйте код, как на рисунке 6.

Рисунок 6

4 В результате должно получиться следующая анимация (рисунок 7):

Рисунок 7

5. Сохраните файл.

Функция поворота – rotate()

Поворачивает элемент на заданный угол.

transform: rotate(α)

Здесь: α — угол поворота. Положительное значение поворачивает элемент по часовой стрелке, отрицательное против.

Синтаксис:
transform: rotate(90deg) //поворот по часовой на 90 градусов
transform: rotate(-180deg) //поворот против часовой на 180 градусов

Задание №3

1. Создайте квадрат аналогичный прошлым с классом kvadrat3.

2. При наведении на квадрат сделаем так, что бы он поворачивался на 360 градусов против часовой стрелки.
Для этого в стиле с псевдоклассом :hover пропишем transform: rotate(-360deg). Так же не забываем, что ранее мы добавляли квадрату свойство transition, поэтому наш поворот будет длиться 2 секунды и обеспечит плавность. Для этого в таблицу стилей добавьте код из рисунка 8.

Рисунок 8

3. В результате должна получиться анимация, как на рисунке 9.

Рисунок 9

4. Сохраните файл.

Функция наклона – skew()

Наклоняет элемент на заданное значение по горизонтали и вертикали в плоскости экрана.

transform: skew(ax, ay)

Здесь:
ax — угол наклона по оси X;
ay — угол наклона по оси Y.
Если значение ay не указано, то оно считается равным 0: skew(30deg) соответствует skew(30deg, 0).
Положительное значение угла наклоняет влево, отрицательно значение – вправо.

Синтаксис:
transform: skew(30deg, 60deg)
transform: skew(60deg, 30deg)
transform: skew(30deg) РАВНОСИЛЬНО transform: skew(30deg, 0)

Задание №4

1. Создайте квадрат аналогичный таким же из прошлых заданий с классом kvadrat4.

2. При помощи функции skewX() деформируем наш квадрат относительно оси X, для того что бы трансформировать относительно оси Y функция должна выглядить следующим образом - skewY(), где значение в скобках указывается в градусах, так как меняются углы. Если же писать функцию в виде skew(), то значения осей указываются через запятую - skew(x-угол,y-угол).
В нашем случае мы сделаем искажение на 70 градусов. Стили вы можете увидеть на листинге на рисунке 10.

Рисунок 10

3. В результате должно получиться следующее (рисунок 11), в данном задании мы не используем эффект «при наведении»:

Рисунок 11

4. Сохраните файл.

---

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

В нижеприведенных примерах квадрат анимируется при наведении мыши. Изучите коды примеров. Создайте свой пример, отличающийся от данных.

Пример 1

html-код

<div class="kvadrat6" style="margin: 200px auto"></div>	

css-код

.kvadrat6 {
	width: 200px;	
	height: 200px;
	background: #186187;
	margin: auto;
	border-style: inset;
	transition: 2s;	
	}

.kvadrat6:hover {
	-moz-transform: rotate(30deg) translate(10px, 50px) skew(7deg, 50deg);
	-webkit-transform: rotate(30deg) translate(10px, 50px) skew(7deg, 50deg);
	-o-transform: rotate(30deg) translate(10px, 50px) skew(7deg, 50deg);
	-ms-transform: rotate(30deg) translate(10px, 50px) skew(7deg, 50deg);
	transform: rotate(30deg) translate(10px, 50px) skew(7deg, 50deg);
	}

Пример 2

html-код

<div class="kvadrat7" style="margin: 200px auto"></div>	

css-код

.kvadrat7 {
	width: 200px;	
	height: 200px;
	background: #186187;
	margin: auto;
	border-style: inset;
	transition: 2s;	
	}

.kvadrat7:hover {
	-moz-transform: scale(2) rotate(720deg) skew(-10deg, 0deg);
	-webkit-transform: scale(2) rotate(720deg) skew(-10deg, 0deg);
	-o-transform: scale(2) rotate(720deg) skew(-10deg, 0deg);
	-ms-transform: scale(2) rotate(720deg) skew(-10deg, 0deg);
	transform: scale(2) rotate(720deg) skew(-10deg, 0deg);
	}

Пример 3

html-код

<div class="kvadrat8" style="margin: 200px auto"></div>	

css-код

.kvadrat8 {
	width: 200px;	
	height: 200px;
	background: #186187;
	margin: auto;
	border-style: inset;
	transition: 2s;	
	}

.kvadrat8:hover {
	-moz-transform: scale(-1) translate(40px, 0px);
	-webkit-transform: scale(-1) translate(40px, 0px);
	-o-transform: scale(-1) translate(40px, 0px);
	-ms-transform: scale(-1) translate(40px, 0px);
	transform: scale(-1) translate(40px, 0px);
	}
	

Пример 4

html-код

<div class="kvadrat9" style="margin: 200px auto"></div>	

css-код

.kvadrat9 {
	width: 200px;	
	height: 200px;
	background: #186187;
	margin: auto;
	border-style: inset;
	transition: 2s;	
	}

.kvadrat9:hover {
	-moz-transform: translate(0px, -20px) skew(0deg, -20deg);
	-webkit-transform: translate(0px, -20px) skew(0deg, -20deg);
	-o-transform: translate(0px, -20px) skew(0deg, -20deg);
	-ms-transform: translate(0px, -20px) skew(0deg, -20deg);
	transform: translate(0px, -20px) skew(0deg, -20deg);
	}

Пример 5

html-код

<div class="kvadrat10" style="margin: 200px auto"></div>	

css-код

	
.kvadrat10 {
	width: 200px;	
	height: 200px;
	background: #186187;
	margin: auto;
	border-style: inset;
	transition: 2s;	
	}

.kvadrat10:hover {
	-moz-transform: rotate(180deg) translate(0px, 20px) skew(70deg, -20deg);
	-webkit-transform: rotate(180deg) translate(0px, 20px) skew(70deg, -20deg);
	-o-transform: rotate(180deg) translate(0px, 20px) skew(70deg, -20deg);
	-ms-transform: rotate(180deg) translate(0px, 20px) skew(70deg, -20deg);
	transform: rotate(180deg) translate(0px, 20px) skew(70deg, -20deg);
	}