Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS3 Свойство transform


CSS Справочник Полный CSS Справочник

Пример

Повернуть элемент div:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari и Chrome */
-o-transform:rotate(7deg); /* Opera */
}

Попробуйте сами »

Поддержка Браузерами

Internet Explorer Firefox Opera Google Chrome Safari

Свойство transform не поддерживается ни одним браузером.

Internet Explorer поддерживает альтернативное свойство -ms-transform (только 2D трансформации).

Firefox поддерживает альтернативное свойство -moz-transform (только 2D трансформации).

Opera поддерживает альтернативное свойство -o-transform (только 2D трансформации).

Safari и Chrome поддерживают альтернативное свойство -webkit-transform (3D и 2D трансформации).


Определение и Использование

Свойство transform применяет 2D или 3D трансформацию к элементу. Это свойство позволяет вам вращать, масштабировать, перемещать, искажать элементы и т.д..

Значение по умолчанию: none
Наследуется: нет
Версия: CSS3
JavaScript синтаксис: объект.style.transform="rotate(7deg)"


Синтаксис

transform: none|функции-трансформации;

Значение Описание
none Указывает на отсутствие трансформации
matrix(n,n,n,n,n,n) Определяет 2D трансформацию, используя матрицу из шести значений
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Определяет 3D трансформацию, используя матрицу 4x4 из 16 значений
translate(x,y) Определяет 2D перемещение
translate3d(x,y,z) Определяет 3D перемещение
translateX(x) Определяет перемещение, используя только значение для оси X
translateY(y) Определяет перемещение, используя только значение для оси Y
translateZ(z) Определяет 3D перемещение, используя только значение для оси Z
scale(x,y) Определяет 2D трансформацию масштабирования
scale3d(x,y,z) Определяет 3D трансформацию масштабирования
scaleX(x) Определяет трансформацию масштабирования, задавая значение для оси X
scaleY(y) Определяет трансформацию масштабирования, задавая значение для оси Y
scaleZ(z) Определяет 3D трансформацию масштабирования, задавая значение для оси Z
rotate(угол) Определяет 2D поворот, угол указывается в параметре
rotate3d(x,y,z,угол) Определяет 3D поворот
rotateX(угол) Определяет 3D поворот вдоль оси X
rotateY(угол) Определяет 3D поворот вдоль оси Y
rotateZ(угол) Определяет 3D поворот вдоль оси Z
skew(x-угол,y-угол) Определяет 2D трансформацию перекоса вдоль осей X и Y
skewX(угол) Определяет 2D трансформацию перекоса вдоль оси X
skewY(угол) Определяет 2D трансформацию перекоса вдоль оси Y
perspective(n) Определяет вид перспективы для 3D трансформированного элемента


Примеры

Попробуйте сами - Примеры

Изображения, брошенные на стол
Этот пример демонстрирует, как создать картинки "полароид" и развернуть их.


CSS Справочник Полный CSS Справочник

© 2011-2017 Уроки CSS
Рейтинг@Mail.ru