Руководство по CSS

Правила CSS (@RULES)

Полный список свойств CSS

Свойство transform-origin в CSS3 Свойство top в CSS

Метод использования и примеры CSS3 transform

Применение свойств CSS для 2D или 3D преобразований элементов. Этот атрибут позволяет вам вращать, масштабировать, перемещать, наклонять, скручивать, вращать и масштабировать элементы в двумерном или трёхмерном пространстве.

В таблице ниже приведено описание использования и истории версий этого свойства, а также синтаксис его использования в скриптах JavaScript.

Значение по умолчанию:	none
Доступно для:	Преобразуемые элементы
Наследование:	Нет
Анимировано:	Да.См. также Анимационные свойства.
Версия:	Новая функция CSS3
JavaScript syntax:	object.style.transform="rotate(7deg)"

Синтаксис использования transform

Грамматика этого свойства такая:

transform:　[　transform-function　]　1　or　more　values　|　none　|　initial　|　inherit

Ниже приведен пример использования свойства transform.

Пример

img　{
　　　　-webkit-transform:　translate(200px,　50px);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　translate(200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　translate(200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px);　　　　　　
}

Проверьте, пожалуйста, </>

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

В таблице ниже описаны значения этого свойства.

Значение	Описание
translate(tx,ty)	Элемент перемещается по X и Y-оси на заданное количество.
translate3d(tx,ty,tz)	Элемент перемещается по X, Y и Z-оси на заданное количество.
translateX(tx)	Элемент перемещается по X-оси на заданное количество.
translateY(ty)	Элемент перемещается по Y-оси на заданное количество.
translateZ(tz)	Элемент перемещается по Z-оси на заданное количество.
rotate(a)	Элемент вращается вокруг точки, определенной свойством transform-origin, на указанный угол.
rotate3d(x,y,z, a)	Элемент в 3D-пространстве вращается по направлению вектора [x, y, z] на угол, указанный в последнем параметре.
rotateX(a)	Элемент вращается вокруг оси X на заданный угол.
rotateY(a)	Элемент вращается вокруг оси Y на заданный угол.
rotateZ(a)	Элемент вращается вокруг оси Z на заданный угол.
scale(sx,sy)	Уменьшить ширину и высоту элемента на заданное количество. Функция scale(1,1) неэффективна.
scale3d(sx,sy,sz)	Уменьшить элемент по X, Y и Z оси на заданное количество. Функция scale3d(1,1,1) неэффективна.
scaleX(sx)	Уменьшить элемент по оси X.
scaleY(sy)	Уменьшить элемент по оси Y.
scaleZ(sz)	Уменьшить элемент по оси Z.
skew(ax,ay)	Сделать элемент наклоненным вдоль осей X и Y на заданный угол.
skewX(ax)	Сделать элемент наклоненным вдоль оси X на заданный угол.
skewY(ay)	Сделать элемент наклоненным вдоль оси Y на заданный угол.
matrix(n,n,n,n,n,n)	Указать 2D-трансформацию в виде матрицы преобразований с шестью значениями.
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	Указать 3D-трансформацию в виде 4x4 матрицы преобразований с 16 значений.
perspective(length)	Определить перспективу 3D-элемента. Обычно, с увеличением значения функции, элемент появляется дальше от наблюдателя.
none	Указать, что не должно применяться любое преобразование.
initial	Установить это свойство в его значение по умолчанию.
inherit	Если указано, то связанный элемент принимает значения свойств transform родительского элемента.

Совместимость браузеров

Совместимость браузеров для свойства transform, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.

	Firefox (2D) 3.5 +, (3D) 10+ ^-moz-, 16 + Chrome (2D) 4 +, (3D) 12+ ^-webkit-, 36 + Internet Explorer (2D) 9 ^-ms-, 10+ Apple Safari (2D) 3.2 +, (3D) 4+ ^-webkit- Opera (2D) 10.5+ -o 　 ^-, (2D)(3D) 15+ 　 ^-webkit-, 23+

Дополнительное чтение

Узнайте больше из следующих руководств:CSS3 2D-трансформации,CSS3 3D-трансформации

Связанные свойства:backface-visibility,perspective,perspective-origin,transform-origin,transform-style.

Свойство transform-origin в CSS3 Свойство top в CSS