CSS-трансформация и анимация

Вид трансформации:

Центр трансформации:

Несколько трансформаций вместе

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

rotate(угол) — поворот;
skewX(угол), skewY(угол) — наклон по горизонтали и вертикали соответственно;
scale(kx,ky) — масштабирование; в частности, scale(-1,1) и scale(1,-1) — отражение по горизонтали и вертикали соответственно без изменения масштаба;
translateX(длина), translateY(длина) — перенос по горизонтали и вертикали соответственно;
none — отсутствие трансформации.

Например, следующий параметр задает две элементарные трансформации — поворот и масштабирование:

transform: rotate(20deg) scale(1.2);

Примечание

Для более ранних версий Firefox можно можно было использовать в качестве значения свойства transform функцию matrix(), задающую матричное преобразование. О смысле матричных преобразований я уже писал в связи с SVG (масштабируемая векторная графика).

Вот вид матрицы 2d-трансформации и соответствующее свойство CSS3:

|a11 a12 a13|
|a21 a22 a23|   transform:matrix(a11,a21,a12,a22,a13,a23)
| 0   0   1 |

Особенность применения matrix(), как и др. функций трансформации, в CSS заключается в необходимости указывать единицы измерений (например, deg, px, %).

Графические фильтры трансформации CSS для старых IE

IE 10+ поддерживает свойство transform, IE 9 — нет, а IE 8 совсем не поддерживает CSS3. Однако в старых IE для трансформаций можно применять специальные графические фильтры, которые не поддерживаются другими браузерами. Среди фильтров есть такой, значением которого является matrix().

В IE8+ фильтр матричной трансформации задается так:

filter:progid:DXImageTransform.Microsoft.Matrix(M11=a11,M12=a12,M21=a21,M22=a22,"auto expand")

Поскольку здесь не указываются элементы a13 и a23 матрицы трансформации, то данный фильтр не выполняет перенос (translateX и translateY). Другие же преобразования, такие как масштабирование, поворот, наклон и отражения, могут быть выполнены.

Для анимации в CSS3 предназначен ряд параметров, из которых важнейшим является transition. В качестве значения можно задать строку, содержащую список (через запятую) элементов, в каждом из которых указаны имя анимируемого параметра CSS, длительность анимации и ее характер. Например, если требуется плавно изменить цвет фона и ширину элемента, то применяется такой параметр:

 transition: background-color 2s ease, width 1s linear;

Здесь приведен пример анимации прямоугольника (элемента <div>), точнее, изменения его размеров, цвета заливки и поворота. Анимация начинается при наведении мыши, а заканчивается в соответствии с указанными длительностями. Характер анимации задается ключевым словом, соотетствующим некоторой кривой Безье: ease, ease-in, ease-out, ease-in-out, linear. Можно еще непосредственно задать кривую Безье (cubic-bezier(x1,y1,x2,y2)).
Вот HTML- и CSS-код анимации прямоугольника:

 <div id="rect">Анимация прямоугольника при наведении на него мыши</div>
 
#rect { 
	width:100px;
	height:70px;
	background-color:#00ffff;
	border:solid 1px blue;
	box-shadow:5px 5px rgba(100,100,100,0.5);
	float:left;
	margin:10px;
	padding:5px;
}
#rect:hover { /* параметры, действующие при наведении мыши */
	width:200px;
	height:100px;
	background-color:red;
	/* Трансформация: */
	transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
	-o-transform:rotate(30deg);
	/* Анимация: */
	transition:width 2s ease, background-color 3s ease, transform 1s ease-in;
	-webkit-transition:width 2s ease, background-color 3s ease, transform 1s ease-in;
	-o-transition:width 2s ease, background-color 3s ease, transform 1s ease-in;
}

CSS-трансформация и анимация

Содержание