CSS transform (rotate, scale, translate). Примеры трансформации объектов в HTML

Свойство CSS transform (от слова "трансформация") позволяет видоизменять элемент на html-страницах. Например, можно

вращать
смещать
изменять масштаб
наклонять
комбинировать выше описанные действия

Содержание статьи
1. Синтаксис transform
2. transform:rotate(x) - вращение объекта
2.1. Пример. Вращение объекта в html через трансформацию
2.2. Пример. Вращение объекта в html при наведении курсора
2.3. Пример. Плавное вращение при наведении курсора (анимация) в html
3. transform:translate(x,y) - смещение объекта
3.1. Пример. Смещение объектов в html через трансформацию
4. transform:scale(x,y) - масштабирование объекта
4.1. Пример. Масштабирование объектов в html
5. transform:skew - наклон объекта
5.1. Пример. Наклон объектов в html
6. Комбинирование значений transform
6.1. Пример. Комбинирование значений transform
7. Другие значения transform

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

1. Синтаксис CSS transform

transform: трансформация1 [трансформация2];

Допускается одновременно несколько действий с объектом (например, вращать, сместить и изменить масштаб).

Примечание про браузеры

Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS:

-ms-transform - для IE9 и старше (младше девятой версии трансформация не поддерживается
-webkit-transform - для Chrome, Safari, Android и iOS
-o-transform - для Opera до версии 12.10
-moz-transform - для Firefox до версии 16.0

2. transform:rotate(x) - вращение объекта

Чтобы вращать элемент существует команда rotate(x). Она позволяет повернуть объект на x градусов по часовой или против часовой стрелке. Значение х нужно указывать в градусах deg

Пример #1. Вращение объекта в html через трансформацию

<html>
<head>
<style>
	.kvadrat1{ // без вращения
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	}
	.kvadrat1_rotate20deg{ // с вращением на 20 градусов
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	-ms-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	transform: rotate(20deg);
	}
</style>
</head>
<body>
	<div class="kvadrat1"></div> 
	<div class="kvadrat1_rotate20deg"></div>
</body>
</html>

На странице преобразуется в следующее

Примечание

Свойства:

-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-moz-transform: rotate(20deg);

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

Пример #2. Вращение объекта в html при наведении курсора

Создадим класс kvadrat2 и пропишем для него псевдокласс :hover, в котором и будет прописано вращение и смена цвета на более светлый (с #444 на #888).

<html>
<head>
<style>
	.kvadrat2{ // без вращения
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	}
	.kvadrat2:hover{ // вращение при наведении
	width:100px; 
	height:100px; 
	background:#888;
	margin:30px;
	-ms-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	transform: rotate(20deg);
	}
</style>
</head>
<body>
	<div class="kvadrat2"></div> 
</body>
</html>

На странице преобразуется в следующее

Но это вращение происходит резко и не смотрится "эффектно". Это можно легко исправить сделав сглаживание. В следующем примере будет реализована анимация.

Пример #3. Плавное вращение при наведении курсора (анимация) в html

Для плавного вращения (или другими словами сглаживания) необходимо прописать еще одно свойство transition. Это свойство отвечает за время и эффект сглаживания. В данном примере рассматривается самый простой случай с переходом за 1 секунду с линейной скоростью linear

<html>
<head>
<style>
	.kvadrat3{ // без вращения
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	transition: all 1s linear; // сглаживание
	-webkit-transition: all 1s linear;
	-o-transition: all 1s linear;
	-moz-transition: all 1s linear;
	}
	.kvadrat3:hover{ // вращение при наведении
	width:100px; 
	height:100px; 
	background:#888;
	margin:30px;
	-ms-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	transform: rotate(20deg);
	transition: all 1s linear;
	-webkit-transition: all 1s linear;
	-o-transition: all 1s linear;
	-moz-transition: all 1s linear;
	}
</style>
</head>
<body>
	<div class="kvadrat3"></div> 
</body>
</html>

На странице преобразуется в следующее

Стало гораздо симпатичнее и такая анимация дает множество возможностей для создания эффектов на сайте только за счет CSS.

3. transform:translate(x,y) - смещение объекта

Следующей командой, которую мы рассмотрим это команда для перемещения объекта translate(x,y), где аргументы в скобках - смещение по оси Х и У соответственно.

Пример #4. Смещение объектов в html через трансформацию

<html>
<head>
<style>
	.kvadrat4{ 
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	}
	.kvadrat4:hover{ 
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	-ms-transform: translate(15px,40px);
	-webkit-transform: translate(15px,40px);
	-o-transform: translate(15px,40px);
	-moz-transform: translate(15px,40px);
	transform: translate(15px,40px);
	}
</style>
</head>
<body>
	<div class="kvadrat4"></div> 
</body>
</html>

На странице преобразуется в следующее

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

Примечание

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: translateX(x) - смещение по Х, translateY(y) - смещение У.

4. transform:scale(x,y) - масштабирование объекта

Команда для масштабирования объекта scale(x,y), где аргументы в скобках - масштабирование по осям Х и У соответственно.

Пример #5. Масштабирование объектов в html

<html>
<head>
<style>
	.kvadrat5{ 
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	}
	.kvadrat5:hover{
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	-ms-transform: scale(1.5,1.3);
	-webkit-transform: scale(1.5,1.3);
	-o-transform: scale(1.5,1.3);
	-moz-transform: scale(1.5,1.3);
	transform: scale(1.5,1.3);
	}
</style>
</head>
<body>
	<div class="kvadrat5"></div> 
</body>
</html>

На странице преобразуется в следующее

При наведении квадрат становится больше по горизонтали на 50% (коэффициент 1.5), а по вертикали на 30% (коэффициент 1.3). Значение 1 означает отсутствие масштабирования. Все что меньше 1, будет означать уменьшение объекта.

Примечание

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: scaleX(x) - масштабирование по Х, scaleY(y) - масштабирование по У.

5. transform:skew - наклон объекта

Команда для наклона объекта skew(x,y), где аргументы в скобках - наклон по осям Х и У соответственно. Наклон необходимо указывать в градусах deg.

Пример #6. Наклон объектов в html

<html>
<head>
<style>
	.kvadrat6{ 
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	}
	.kvadrat6:hover{
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	-ms-transform: skew(20deg,10deg);
	-webkit-transform: skew(20deg,10deg);
	-o-transform: skew(20deg,10deg);
	-moz-transform: skew(20deg,10deg);
	transform: skew(20deg,10deg);
	}
</style>
</head>
<body>
	<div class="kvadrat6"></div> 
</body>
</html>

На странице преобразуется в следующее

При наведении квадрат трансформируется в ромб благодаря наклону.

Примечание

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: skewX(x) - наклон по Х, skewY(y) - наклон по У.

6. Комбинирование значений transform

Настало время рассмотреть интересные эффекты, которые можно получить комбинируя вместе различные трансформации. Применим сразу три действия по изменения объекта масштабирование (scale), вращение (rotate) и перемещения (translate).

Пример #7. Комбинирование значений transform

Исходное значение: квадрат с черной рамкой. При наведении на него он вращаясь превратится в круг с красной рамкой и изменит цвет.

<html>
<head>
<style>
	.combo{ 
	width: 100px; 
	height: 100px; 
	background: #444;
	margin: 30px;
	border: 5px solid #222;
	transition: all 2s ease-in;
	-webkit-transition: all 2s ease-in;
	-o-transition: all 2s ease-in;
	-moz-transition: all 2s ease-in;
	}
	.combo:hover{ 
	width:100px; 
	height:100px; 
	background: #A3423B;
	border-radius: 50px;
	border: 5px solid #F00;
	-ms-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px);
	-webkit-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px);
	-o-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px);
	-moz-transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px);
	transform: scale(1.3,1.3) rotate(40deg) translate(5px,5px);
	margin: 30px;
	transition: all 2s ease-in;
	-webkit-transition: all 2s ease-in;
	-o-transition: all 2s ease-in;
	-moz-transition: all 2s ease-in;
}
</style>
</head>
<body>
	<div class="combo"></div> 
</body>
</html>

На странице преобразуется в следующее

7. Другие значения transform

Мы рассмотрели самые основные значения transform. Рассмотрим остальные возможности.

none - отсутствие преобразований (по умолчанию включено оно);
matrix(x,x,x,x,x,x) - преобразование 2D с помощью матрицы из 6 значений;
matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x) - преобразование 3D с помощью матрицы из 16 значений;
translate3d(x,y,z) - перемещение 3d (по сравнению с обычным перемещением, здесь добавлена еще третья координата);
scale3d(x,y,z) - масштабирование в 3d (по сравнению с обычным масштабированием, здесь добавлена еще третья координата);
rotate3d(x,y,z) - вращение в 3d (по сравнению с обычным вращением, здесь добавлена еще третья координата);
rotateX(x) - 3d вращение по оси X;
rotateY(x) - 3d вращение по оси Y;
rotateZ(x) - 3d вращение по оси Z;
perspective(n) - перспектива для преобразования 3D элемента;

В JavaScript свойство CSS transform доступно по следующим свойствам:

object.style.transform="Трансформация"
[window.]document.getElementById("elementID").style.transform = ""

Возможно, вы зададите вопрос "а зачем вообще использовать transform, когда можно просто изменять данные объекта как нам нужно. Например, изменив размеры объекта?" Разница в том, что свойств transform при трансформации никак не сдвигает другие элементы на странице. В случае же простого изменения размеров объекта это неминуемо приводит к сдвигу соседних объектов вокруг, что, как правило, некрасиво.

← Перейти в каталог CSS уроков