transform

Описание

CSS3 transform (трансформация)
С помощью свойства CSS transform можно применять к элементам веб-страниц различные эффекты трансформации, а именно, перемещение, вращение, масштабирование и др.
ДЕМО

transform
Значения:
Начальное значение: none
Область применения: блочные и строчные элементы
Наследование: нет
Поддержка браузерами: basic Internet Explorer 9+ (-ms), Chrome 1+ (-webkit), Opera 10.5+ (-o), Safari 3.1+ (-webkit), Firefox 3.5+ (-moz)
Поддержка браузерами: 3D Internet Explorer 10+ (-ms), Chrome 12+ (-webkit), Safari 4+ (-webkit), Firefox 10+ (-moz)
Версия CSS: CSS 3
Примечание:

Синтаксис

transform:  <transform-function> [<transform-function>]* | none

Значения

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

matrix (<число>, <число>, <число>, <число>, <число>, <число>)
определяет матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат;
matrix3d (<число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>)
определяет 3d матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат;
translate (<значение><значение>)
определяет сдвиг элемента по осям x и y. Если задано только одно значение, сдвиг по оси y будет равен 0;
translate3d (<значение>, <значение>, <значение>)
определяет сдвиг элемента по осям x, y и z;
translateX (<значение>)
определяет сдвиг элемента по оси x;
translateY (<значение>)
определяет сдвиг элемента по оси y;
translateZ (<значение>)
определяет сдвиг элемента по оси z;
scale (<число><число>)
определяет масштабирование элемента по осям x и y. Если второе значение не указано, оно принимается равным первому;
scale3d (<число>, <число>, <число>)
определяет масштабирование элемента по осям x, y и z;
scaleX (<число>)
определяет масштабирование элемента по оси x;
scaleY (<число>)
определяет масштабирование элемента по оси y;
scaleZ (<число>)
определяет масштабирование элемента по оси z;
rotate (<угол>)
определяет поворот элемента на заданный угол относительно значение указанного в свойстве transform-origin;
rotate3d (<число>, <число>, <число>, <угол>)
определяет поворот элемента на заданный угол по направлению вектора, заданного первыми тремя параметрами. Поворот осуществляется относительно значения, заданного свойством transform-origin;
rotateX (<число>)
определяет угол поворота элемента по оси x;
rotateY (<число>)
определяет угол поворота элемента по оси y;
rotateZ (<число>)
определяет угол поворота элемента по оси z;
skew (<угол>)
определяет наклон элемента по осям x и y. Если второй величина не задана, то значение 0 используется для угла по оси x;
skewX (<угол>)
определяет угол наклона элемента по оси x;
skewY (<угол>)
определяет угол наклона элемента по оси y;
perspective (<глубина>)
расстояние в пикселях от зрителя до плоскости z=0.

Пример

В первом примере при наведении курсора мыши на блочный элемент (в данном случае div) он перемещается на 50px по осям x и y

div:hover {
    transform: translate(50px,50px);
	-moz-transform: translate(50px,50px);
	-webkit-transform: translate(50px,50px);
	-o-transform: translate(50px,50px);
}

Если посмотреть на демонстрацию этого примера, то можно заметить, что перемещение элемента происходит мгновенно, что смотрится совсем не эффектно. Поэтому, для получения плавного трансформирования, целесообразно будет свойство transform применять вкупе со свойством transition, о котором я рассказывал в прошлых уроках. Это я и реализовал в следующем примере

div {
	transition:all 1s ease-in-out;
	-webkit-transition:all 1s ease-in-out;
	-moz-transition:all 1s ease-in-out;
	-o-transition:all 1s ease-in-out;
}
div:hover {
	transform: translate(50px,50px);
	-moz-transform: translate(50px,50px);
	-webkit-transform: translate(50px,50px);
	-o-transform: translate(50px,50px);
}

Если теперь взглянуть на результат, то мы увидим плавную анимацию перемещения.

И еще один пример использования свойства CSS3 transform с эффектом skew (наклон)

div:hover {
	transform: skew(30deg,30deg);
	-moz-transform: skew(30deg,30deg);
	-webkit-transform: skew(30deg,30deg);
	-o-transform: skew(30deg,30deg);
}
div {
	transform: translate(50px,50px) scale(1.5,1.5) rotate(45deg);
	-moz-transform: translate(50px,50px) scale(1.5,1.5) rotate(45deg);
	-webkit-transform: translate(50px,50px) scale(1.5,1.5) rotate(45deg);
	-o-transform: translate(50px,50px) scale(1.5,1.5) rotate(45deg);
}

Комментирование запрещено.