Design, photoshop, illustrator, web-разработки, дизайн, уроки photoshop

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

В CSS3 имеются параметры (свойства), посредством которых можно трансформировать (поворачивать, масштабировать и т.д.) элементы страницы, а также анимировать (плавно изменять во времени) их свойства. При этом можно обойтись без сценариев на JavaScript и SVG. В браузерах (Opera 18 и Chrome 31) в именах CSS-свойств пока требуется указывать специальные (вендорные) префиксы -o- и -webkit- соответственно (например, -o-transform и -webkit-transform).

CSS-трансформация
Трансформации в CSS3 задаются посредством свойства transform. Выберите в списках вид трансформации (значение свойства transform) и ее центр (значение свойства transform-origin) и посмотрите результат ее применения к элементу <div>, содержащему текст и картинку. Под списками отображаются 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|<br />
|a21 a22 a23|   transform:matrix(a11,a21,a12,a22,a13,a23)<br />
| 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). Другие же преобразования, такие как масштабирование, поворот, наклон и отражения, могут быть выполнены.

CSS-анимация

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

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

Здесь приведен пример анимации прямоугольника (элемента

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

Постоянные ссылки

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