2.20. CSS3-трансформации

Основное назначение CSS3-трансформаций в стилевом оформлении в ходе выполнения вёрстки некоторого элемента или всей страницы в целом — это преобразование формы, вращение, изменение расположения и так далее.

В CSS существует две разновидности трансформирования: двухмерное (2D) и трехмерное (3D). Двухмерное происходит в пространстве, состоящем из двух плоскостей. Как известно из курса математики, оно называется декартовой или прямоугольной системой координат. Трехмерное происходит в пространстве, в которое входит три плоскости (X, Y и Z). В этом материале подробно коснемся 2D CSS3 transform.

Следует отметить, что в соответствии с принятым стандартом трансформации применимы только к тэга, у которых правило display равно:

Среди браузеров, в которых срабатывает рассматриваемое свойство как с доп префиксом, так и напрямую:

ИЕ: 10.0, 9.0 -ms-
ЭДж: 12.0
Firefox: 16.0, 3.5 -moz-
Хром: 36.0, 4.0 -webkit-
Сафари: 9.0, 3.1 -webkit-
Опера: 23.0, 15.0 -webkit- (-о-)
Маковский сафари: 9, 7.1 -webkit-
Андройд Браузер: 53, 2.1 -webkit-
Хром (под андройдом): -webkit-

Вернуться к навигации

1. Функции двухмерной трансформации transform

Свойство представляет собой набор опций, среди которых доступны разные функции трансформирования. Является не наследуемым. Разберем его подробнее:

transform
Значения:
none	Служит для отмены какого-либо трансформирования элемента. Является опцией, которая устанавливается по умолчанию.
matrix(i,j,k,m,x,y)	Данное матричное преобразование представляет собой синергию (сочетание) нескольких функций трансформирования. Доступные параметры трансформирования: вращение, изменение масштаба, изменение угла наклона и местоположения контейнера. Параметр i предназначен для масштабирования html-блока по горизонтальной декартовой линии координат. При 0 < i < 1 происходит уменьшение, а при i > 1 происходит увеличение по ширине. Параметр j применяется для деформации хтмл-контейнера по вертикали. -? < j < +? Значение k применяется для деформации хтмл-контейнера по горизонтали. -? < k < +? Переменная m предназначена для масштабирования html-блока по вертикальной декартовой линии координат. При 0 < m < 1 происходит уменьшение, а при m > 1 происходит увеличение по ширине. Переменная x в матрице задает смещение по X-ой координате. -? < x < +?. Переменная y в матрице задает смещение Y-ой координате. -? < y < +?.
translate(x,y)	Предназначена для смещения хтмл-блока по горизонтальной и вертикальной воображаемым осям одновременно. Входные переменные могут иметь как отрицательное, так и положительное значение. Следует отметить, что эта функция влияет только на визуальное смещение элемента, его фактическое местоположение остается тем же. То есть иными словами — сдвиг не оказывает влияние на местоположение других блоков.
translateX(n)	Предназначена для смещения html-блока по горизонтальной линии декартова пространства на n единиц, которые могут как в отрицательную, так и положительную стороны.
translateY(n)	Предназначена для смещения html-блока по вертикальной линии декартова пространства на n единиц, которые могут быть отрицательными и положительными.
scale(x,y)	Предназначена для масштабирования элемента одновременно в двух направлениях (по ширине и высоте): x — по воображаемой горизонтальной линии, y — по воображаемой вертикальной. Оба входных значения могут быть минусовыми и плюсовыми. При минусовых величинах формируется зеркальное отображение. При 0 < x < 1 объект уменьшается, а при x > 1 увеличивается по ширине. Для y аналогично, но по высоте.
scaleX(n)	Применяется для масштабирования (сужения, растяжения по ширине) текущего html-контейнера вдоль воображаемой горизонтальной оси декартова пространства. При 0 < n < 1 объект уменьшается, а при n > 1 увеличивается по ширине. При n = 1 хтмл-объект будет иметь реальную ширину без изменений. n может быть как положительным, так и отрицательным. При минусовых величинах объект принимает зеркальное отображение.
scaleY(n)	Применяется для масштабирования (сужения, растяжения по высоте) текущего html-контейнера вдоль воображаемой вертикальной оси декартова пространства. При 0 < n < 1 объект уменьшается, а при n > 1 увеличивается по высоте. При n = 1 хтмл-объект будет иметь реальную высоту без изменений. n может быть как положительным, так и отрицательным. При минусовых величинах объект принимает зеркальное отображение.
rotate(n)	Применяется для поворота объекта на n-ое число градусов (некоторый угол). n может быть как положительным (вращение по ходу стрелки часов), так и отрицательным (вращение против хода стрелки часов). Одно полное вращение элемента равно 360 градусов. Формат записи угла: число и deg, grad, rad или turn.
skew(x-угол,y-угол)	Предназначено для деформарования хтмл-элемента по x-ой и y-ой осям пространства, то есть в ширину и высоту одновременно. Формат значения: число и deg, grad или rad.
skewX(n)	Предназначена для деформации хтмл-контейнера по воображаемой горизонтальной оси.
skewY(n)	Используется для деформации хтмл-контейнера по воображаемой вертикальной оси.
initial	Будет установлено в первоначальное значение.
inherit	Унаследовать правило от родителя.

Формат записи

.b-square-2
{
	transform: matrix(1.4,0,0.7,1.3,33,0);
}

.b-square-2
{
	transform: translate(-15px, 15px);
}

.b-square-2
{
	transform: translateX(-15px);
}

.b-square-2
{
	transform: translateY(-15px);
}

.b-square-2
{
	transform: scale(0.3, 1.5);
}

.b-square-2
{
	transform: scaleX(0.3);
}

.b-square-2
{
	transform: scaleY(-1.5);
}

.b-square-2
{
	transform: rotate(30deg);
}

.b-square-2
{
	transform: skew(-45deg, 55deg);
}

.b-square-2
{
	transform: skewX(-45deg);
}

.b-square-2
{
	transform: skewY(55deg);
}

Вернуться к навигации

2. Координаты центра трансформации transform-origin

Свойство предназначено для переноса координат центра трансформирования в пределах блока. Эти координаты могут быть заданы специальными акронимами, в пикселях (можно использовать и другие единицы) или в процентах. Если данное правило не прописывать, то интерпретатор стилей сообщит браузер автоматически взять в качестве центра середину блока.

transform-origin
Значения:
x, y	Переменная X отвечает за сдвиг по горизонтальной линии прямоугольной системы координат и может быть задана: акронимами (left, right, center), пикселями (или др) или процентами. Переменная Y отвечает за сдвиг по вертикальной линии той же системы и может быть задана: акронимами (top, bottom , center), пикселями (или др) или процентами. Каждая переменная может принимать как положительные, так и отрицательные величины.  Процентные величины могу превышать 100% (при этом середина трансформирования еще больше смещается относительно центра).
initial	Будет установлено в исходное значение.
inherit	Берет значение у родительского блока

Формат записи

.b-square-2
{
	-webkit-transform-origin: left top; 
	-ms-transform-origin: left top;
	transform-origin: left top;
}

.b-square-2
{
	-webkit-transform-origin: 200% 220%;
	-ms-transform-origin: 200% 220%;
	transform-origin: 200% 220%;
}

.b-square-2
{
	-webkit-transform-origin: 33px 22px;
	-ms-transform-origin: 33px 22px;
	transform-origin: 33px 22px;
}

Вернуться к навигации

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

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

.b-square
{
	transform: translateX(20px) rotate(-45deg);
	-ms-transform: translateX(20px) rotate(-45deg);
	-webkit-transform: translateX(20px) rotate(-45deg);

	background-color: #84cd1b;
	width: 30px;
	height: 30px;

	left: 20px;
	top: 20px;
	position: relative;
}

Вернуться к навигации

4. Примеры css transform

Для большей наглядности применения описанных выше трансформаций приведем следующий код и пример реальной верстки наклонной бирки «Новинка» над картинкой:

css:

.b-ramka
{
	width: 300px;
	height: 220px;
	border: 1px solid #1E824C;
	margin: 0px;
	padding: 0px;
}

.b-pic
{
	width: 240px;
	height: 160px;
	margin: 0px;
	padding: 0px;
	position: relative;
	overflow: hidden;
	top: 50%;
	margin-top: -90px;
	left: 50%;
	margin-left: -115px;
}

.b-pic img
{
	position: relative;
	right: 10px;
	top: 10px;
}

.b-pic:before, .b-pic:after
{
	content: '';
	position: absolute;
	background-color: #ac2126;
}

.b-pic:before
{
	width: 40px;
	height: 10px;
	right: 92px;
	border-radius: 9px 9px 0px 0px;
}

.b-pic:after
{
	width: 10px;
	height: 40px;
	right: 0px;
	top: 92px;
	
	border-radius: 0px 9px 9px 0px;
}

.b-birka
{
	border: 1px dashed #fff;
	background-color: #e1373e;
	text-align: center;
	z-index: 3;
	
	
	width: 200px;
	height: 35px;
	
	color: #fff;
	font-family: Arial;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 34px;
	
	position: absolute;
	top: 30px;
	right: -50px;

	margin: 0px;
	padding: 0px;
	
	box-shadow: 0 0 0 3px #e1373e, 0px 20px 4px -16px rgba(0,0,0,0.7);
	
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}

html:

<div class="b-ramka">
	<div class="b-pic">
		<img src="http://paratapok.ru/examples/5041/css3-transform-4.jpg" width="240" />
		<div class="b-birka">Новинка</div>
	</div>
</div>

И на закуску приведем пример вёрстки заглушки с использованием разных функций трансформирования: http://paratapok.ru/frontend/4626_shablon-prostoj-html-zaglushki-dlya-sajta-s-naklonnymi-blokami/.

Прочитав, написанное в материале, Вы познакомились с одним из важнейших разделов ЦСС и убедились в том, насколько широки и удобны возможности влияния на визуальную форму отображения тэгов при разметке документа. Хотелось бы акцентировать внимание на том, что следует не забывать при верстке в файле стилей прописывать для отдельных версий обозревателей рассматриваемое правило с помощью спецпрефикосов: -o-, -ms-, -webkit- и так далее.