Трансформации, переходы и анимации

Трансформации

Последнее обновление: 01.05.2016

Одним из нововведений CSS3 по сравнению с предыдущей версией является встроенная возможность трансформаций элемента. К трансформациям относятся такие действия, как вращение элемента, его масштабирование, наклон или перемещение по вертикали или горизонтали. Для создания трансформаций в CSS3 применяется свойство transform.

Вращение

Для поворота элемента свойство transform использует функцию rotate:

transform: rotate(угол_поворота deg);

После слова rotate в скобках идет величина угла поворота в градусах. Например, повернем блок на 30 градусов:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Трансформации в CSS3</title>
		<style>
			div{
				background-color: #ccc;
				width: 120px;
				height: 120px;
				margin:5px;
				padding: 40px 10px;
				box-sizing: border-box;
				border: 1px solid #333;
				display: inline-block;
			}
			.rotated{
				transform: rotate(30deg);
			}
		</style>
    </head>
    <body>
		<div></div>
		<div class="rotated">rotate(30deg)</div>
		<div></div>
    </body>
</html>

При этом можно отметить, что при повороте вращаемый элемент может накладываться на соседние элементы, так как сначала происходит установка положения элементов и только затем поворот.

Угол поворота может представлять как положительное, так и отрицательное значение. В случие отрицательного значения поворот производится в противоположную сторону.

Масштабирование

Применение масштабирования имеет следующую форму:

transform: scale(величина_масштабирования);

Используем маштабирование:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Трансформации в CSS3</title>
		<style>
			div{
				background-color: #ccc;
				width: 120px;
				height: 120px;
				margin:5px;
				padding: 40px 10px;
				box-sizing: border-box;
				border: 1px solid #333;
				display: inline-block;
			}
			.halfScale{
				transform: scale(0.5);
			}
			.doubleScale{
				transform: scale(2);
			}
		</style>
    </head>
    <body>
		<div></div>
		<div class="doubleScale">scale(2)</div>
		<div></div>
		<div class="halfScale">scale(0.5)</div>
    </body>
</html>

Значение больше 1 приводит к растяжению по вертикали и горизонтали, а меньше 1 - к сжатию. То есть значение 0.5 приводит к уменьшению в два раза, а значение 1.5 - к увеличению в полтора раза.

Можно также задать величины масштабирования отдельно для вертикали и горизонтали:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Трансформации в CSS3</title>
		<style>
			div{
				background-color: #ccc;
				width: 120px;
				height: 120px;
				margin:5px;
				padding: 40px 10px;
				box-sizing: border-box;
				border: 1px solid #333;
				display: inline-block;
			}
			.scale1{
				transform: scale(2, 0.5);
			}
		</style>
    </head>
    <body>
		<div></div>
		<div class="scale1">scale(2, 0.5)</div>
		<div></div>
    </body>
</html>

В данном случае по горизонтали будет идти масштабирование в 2 раза, а по вертикали - в 0.5 раз.

Также можно по отдельности задать параметры масштабирования: функция scaleX() задает изменение по горизонтали, а scaleY() - по вертикали. Например:

.scale1{
	transform: scaleX(2);
}

Используя отрицательные значения, можно создать эффект зеркального отражения:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Трансформации в CSS3</title>
		<style>
			div{
				background-color: #ccc;
				width: 120px;
				height: 120px;
				margin:5px;
				padding: 40px 10px;
				box-sizing: border-box;
				border: 1px solid #333;
				display: inline-block;
			}
			.scale1{
				transform: scaleX(-1);
			}
		</style>
    </head>
    <body>
		<div></div>
		<div class="scale1">scaleX(-1)</div>
		<div></div>
    </body>
</html>

Трансформации и зеркальное отражение в CSS3

Перемещение

Для перемещения элемента используется функция translate:

transform: translate(offset_X, offset_Y);

Значение offset_X указывает, на сколько элемент смещается по горизонтали, а offset_Y - по вертикали.

К примеру, сместим блок на 30 пикселей вниз и на 50 пикселей вправо:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Трансформации в CSS3</title>
		<style>
			div{
				background-color: #ccc;
				width: 120px;
				height: 120px;
				margin:5px;
				padding: 40px 10px;
				
				box-sizing: border-box;
				border: 1px solid #333;
				display: inline-block;
			}
			.translated{
				transform: translate(50px, 30px);
				background-color:red;
			}
		</style>
    </head>
    <body>
		<div></div>
		<div class="translated"></div>
		<div></div>
    </body>
</html>

В качестве единиц измерения смещения можно применять не только пиксели, но и любые другие единицы измерения длины в CSS - em, % и тд.

С помощью дополнительных функций можно отдельно применять смещения к горизонтали или вертикали: translateX() (перемещение по горизонтали) и translateY() (перемещение по вертикали). Например:

transform: translateX(30px);

Кроме положительных значений также можно использовать и отрицательные - они перемещают элемент в противоположную сторону:

transform: translateY(-2.5em);

Наклон

Для наклона элемента применяется функция skew():

transform: skew(X, Y);

Первый параметр указывает, на сколько градусов наклонять элемент по оси X, а второй - значение наклона по оси Y.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Трансформации в CSS3</title>
		<style>
			div{
				background-color: #ccc;
				width: 120px;
				height: 120px;
				margin:5px;
				padding: 40px 10px;
				
				box-sizing: border-box;
				border: 1px solid #333;
				display: inline-block;
			}
			.skewed{
				transform: skew(30deg, 10deg);
				background-color:red;
			}
		</style>
    </head>
    <body>
		<div></div>
		<div class="skewed"></div>
		<div></div>
    </body>
</html>

Для создания наклона только по одной оси для другой оси надо использовать значение 0. Например, наклон на 45 градусов по оси X:

transform: skew(45deg, 0);

Или наклон на 45 градусов только по оси Y:

transform: skew(0,45deg);

Для создания наклона отдельно по оси X и по оси Y в CSS есть специальные функции: skewX() и skewY() соответственно.

transform: skewX(45deg);

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

transform: skewX(-30deg);

Комбинирование преобразований

Если нам надо применить к элементу сразу несколько преобразований, скажем, вращаение и перемещение, то мы можем их комбинировать. Например, применение всех четырех преобразований:

transform: translate(50px, 100px) skew(30deg, 10deg) scale(1.5) rotate(90deg);

Браузер применяет все эти функции в порядке их следования. То есть в данном случае сначала к элементу применяется перемещение, потом наклон, потом масштабирование и в конце вращение.

Исходная точка трансформации

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

left top: левый верхний угол элемента
left bottom: левый нижний угол элемента
right top: правый верхний угол элемента
right bottom: правый нижний угол элемента

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Трансформации в CSS3</title>
		<style>
			div{
				background-color: #ccc;
				width: 100px;
				height: 100px;
				margin: 80px 30px;
				float: left;
				box-sizing: border-box;
				border: 1px solid #333;
			}
			.transform1{
				transform: rotate(-45deg);
			}
			.transform2{
				transform-origin: left top;
				transform: rotate(-45deg);
			}
			.transform3{
				transform-origin: right bottom;
				transform: rotate(-45deg);
			}
		</style>
    </head>
    <body>
		<div class="transform1"></div>
		<div class="transform2"></div>
		<div class="transform3"></div>
    </body>
</html>

Назад Содержание Вперед

Глава 1. Введение в HTML5
Глава 2. Элементы в HTML5
Глава 3. Работа с формами
Глава 4. Семантическая структура страницы
Глава 5. Основы CSS3. Селекторы
Глава 6. Основы CSS3. Свойства
Глава 7. Создание макета страницы и верстка
Глава 8. Трансформации, переходы и анимации
Глава 9. Адаптивный дизайн
Глава 10. Мультимедиа
Глава 11. Flexbox
Глава 12. Grid Layout
Глава 13. Переменные в CSS

Помощь сайту

Юмани:

410011174743222

Перевод на карту

Номер карты:

4048415020898850