Закрыть   X

  •    
  •    
Печать

transform

Автор: Алексей Елизаров.

CSS свойство transform

Поддержка браузеров

Список альтернативных свойств для браузеров:

  • Internet Explorer - "-ms-transform" (только для 2D преобразований)
  • Firefox - "-moz-transform" (только для 2D преобразований)
  • Opera - "-o-transform" (только для 2D преобразований)
  • Safari и Chrome - "-webkit-transform" (для 2D и 3D преобразований)

Описание

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

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

Значения свойства

Значение Описание
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 преобразование с помощью матрицы из шестнадцати(4х4) значений.
translate(x,y) Применяет 2D смещение.
translate3d(x,y,z) Применяет 3D смещение.
translateX(x) Определяет смещение, только по оси Х.
translateY(y) Определяет смещение, только по оси У.
translateZ(z) Определяет 3D смещение, только по оси Z.
scale(x,y) Применяет 2D преобразование.
scale3d(x,y,z) Применяет 3D преобразование масштаба.
scaleX(x) Определяет преобразование масштаба по оси Х.
scaleY(y) Определяет преобразование масштаба по оси У.
scaleZ(z) Определяет 3D преобразование масштаба по оси Z.
rotate(angle) Определяет 2D поворот, угол указывается в параметре.
rotate3d(x,y,z,angle) Определяет 3D поворот.
rotateX(angle) Определяет 3D поворот вдоль оси Х.
rotateY(angle) Определяет 3D поворот вдоль оси У.
rotateZ(angle) Определяет 3D поворот вдоль оси Z.
skew(x-angle,y-angle) Определяет 2D преобразование вдоль осей Х и У.
skewX(angle) Определяет 2D преобразование наклона вдоль оси Х.
skewY(angle) Определяет 2D преобразование наклона вдоль оси У.
perspective(n) Определяет перспективу для преобразования 3D элемента.

#myDIV
{
background-color:#1aa5ca;
transform:rotate(20deg);
}


 


© 2018 cssprofi.ru.Алексей Елизаров. Все права защищены
cssprofi.ru - запрещено использование материалов сайта без согласия его автора и обратной ссылки