transform

CSS transform Property

With the help of the CSS transform property, a 2D or 3D transformation is applied to the element. It is one of the CSS3 properties. This property allows to rotate, skew, scale or translate the element. It takes none value or from the list of transform functions.

Initial Value	none
Applies to	Transformable elements.
Inherited	No.
Animatable	Yes. Degree is animatable.
Version	CSS3
DOM Syntax	Object.style.transform = «rotate(10deg)»;

Syntax

transform: none | transform-functions | initial | inherit;

Example of the transform property:

html> html> head> title>Title of the document title> style> div < border: 2px dashed #666; background-color: #8ebf42; transform: translate(10px, 40px) rotate(50deg); width: 130px; height: 80px; > style> head> body> h2>Transform property example h2> div>An element div> body> html>

Result

Example of the transform property with the «rotate», «skewY», «scaleY», «translateX», «skew» values:

html> html> head> title>Title of the document title> style> div < margin: 35px 20px; > div.box1 < width: 130px; height: 80px; border: 1px solid #000; background-color: #1c87c9; -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); > div.box2 < width: 120px; height: 80px; border: 1px solid #000; background-color: #8ebf42; -ms-transform: skewY(30deg); -webkit-transform: skewY(30deg); transform: skewY(30deg); > div.box3 < width: 160px; height: 80px; border: 1px solid #000; background-color: #FFFF00; -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); > div.box4 < width: 160px; height: 80px; border: 1px solid #000; background-color: #ccc; -ms-transform: rotate(160deg); -webkit-transform: rotate(160deg); transform: rotate(160deg); > div.box5 < width: 160px; height: 80px; border: 1px solid #000; background-color: #990099; -ms-transform: translateX(50px); -webkit-transform: translate(50px); transform: translateX(50px); > div.box6 < width: 160px; height: 80px; border: 1px solid #000; background-color: #FF0000; -ms-transform: skew(170deg, 170deg); -webkit-transform: skew(170deg, 170deg); transform: skew(170deg, 170deg); > style> head> body> h2>Transform property example h2> h3>transform: rotate(30deg): h3> div class="box1"> div> h3>transform: skewY(30deg): h3> div class="box2"> div> h3>transform: scaleY(1): h3> div class="box3"> div> h3>transform: transform:rotate(160deg): h3> div class="box4"> div> h3>transform: translateX(50px): h3> div class="box5"> div> h3>transform: skew(170deg,170deg): h3> div class="box6"> div> body> html>

In the given example, for maximum browser compatibility the -webkit- for Safari, Google Chrome, and Opera extensions are used.

The «skew» value

The «skewX» and «skewY» transform values are used for somehow tilting an element. There doesn’t exist any shorthand property to skew an element, that’s why both of these values are used.

The «rotate» value

With the help of the «rotate» value, the element is rotated clockwise from the original position. In case of using a negative value, it will be rotated in the opposite direction.

The «translate» value

The «translate» value is used for moving the element up or down, as well as sideways. More values are presented below.

Values

Value	Description	Play it
none	No transform is applied.	Play it »
translate()	Translates the element by a vector [tx, ty]. Tx is the translation along the x-axis. Ty is the translation along the y-axis.	Play it »
translateX()	Translates the element along the x-axis.	Play it »
translateY()	Translates the element along the y-axis.	Play it »
scale(x,y)	Scales an element up or down.	Play it »
scaleX()	Scales an element up or down the direction of the x-axis.	Play it »
scaleY()	Scales an element up or down the direction of the y-axis.	Play it »
rotate(number)	Rotates an element in the two-dimensional space.The angle is specified in the parameter.	Play it »
skew()	Defines a 2D skew transformation along the x-axis and the y-axis.	Play it »
skewX()	Defines a 2D skew transformation along the x-axis.	Play it »
skewY()	Defines a 2D skew transformation along the y-axis.	Play it »
matrix()	Defines a 2D transformation, using a matrix of six values.	Play it »
translateZ	Translates an element by the given amount along the z-axis.
translate3d()	Defines a three dimensional translation.
scaleZ()	Scales an element in the third dimension, along the z-axis.
scale3d()	Defines a three dimensional scale transformation.
rotateX()	Rotates an element about the x-axis in three-dimensional space.	Play it »
rotateY()	Rotates an element about the y-axis in three-dimensional space.	Play it »
rotateZ()	Rotates an element about the z-axis in three-dimensional space.	Play it »
rotate3d()	Defines a three dimensional rotate transformation.
matrix3d()	Defines a 3D transformation, using a 4×4 matrix of 16 values.
perspective()	Defines a perspective view for the three dimensional element.
initial	Makes the property use its default value.
inherit	Inherits the property from its parent element.

Browser support

Practice Your Knowledge

Which statement is incorrect about transform properrty?

It can be applied to transformable elements. The transform property allows to rotate, scale, skew, or translate the element. It specifies only two-dimensional transformation of the element.

Источник

transform¶

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

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

/* Keyword values */ transform: none; /* Function values */ transform: matrix(1, 2, 3, 4, 5, 6); transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); transform: scale(2, 0.5); transform: scaleX(2); transform: scaleY(0.5); transform: rotate(0.5turn); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); transform: matrix3d( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16 ); transform: translate3d(12px, 50%, 3em); transform: translateZ(2px); transform: scale3d(2.5, 1.2, 0.3); transform: scaleZ(0.3); transform: rotate3d(1, 2, 3, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: perspective(17px); /* Multiple function values */ transform: translateX(10px) rotate(10deg) translateY(5px); /* Global values */ transform: inherit; transform: initial; transform: revert; transform: revert-layer; transform: unset; 

Значения¶

Функции трансформации¶

matrix() Задаёт двумерную матрицу преобразований. matrix3d() Задаёт трёхмерную матрицу преобразований. rotate() Поворачивает элемент в двумерном пространстве на заданный угол относительно точки трансформации, задаваемой свойством transform-origin . rotate3d() Поворачивает элемент в трёхмерном пространстве. rotateX() Поворачивает элемент на заданный угол относительно оси X. rotateY() Поворачивает элемент на заданный угол относительно оси Y. rotateZ() Поворачивает элемента на заданный угол относительно оси Z. scale() Масштабирует элемент по горизонтали и вертикали. Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб. scale3d() Масштабирует элемент в трёхмерном пространстве. scaleX() Масштабирует элемент по горизонтали. scaleY() Масштабирует элемент по вертикали. scaleZ() Масштабирует элемент по оси Z. skewX() Наклоняет элемент на заданный угол по вертикали. skewY() Наклоняет элемент на заданный угол по горизонтали. translate() Сдвигает элемент на заданное значение по горизонтали и вертикали. translate3d() Сдвигает элемент на заданное значение в трёхмерном пространстве. translateX() Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево. translateY() Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх. translateZ() Сдвигает элемент по оси Z на указанное значение. Положительное значение сдвигает назад, отрицательное вперёд. perspective() Задаёт перспективу.

Примечание¶

• Internet Explorer 9 поддерживает свойство -ms-transform .
• Chrome до версии 36 и Android до версии 4 поддерживают свойство -webkit-transform .
• Safari поддерживает свойство -webkit-transform .
• Opera до версии 12.10 и с версии 15 до 23 поддерживает свойство -o-transform .
• Firefox до версии 16 поддерживает свойство -moz-transform .

Значение по-умолчанию: none

Применяется к трансформируемым элементам

Спецификации¶

Источник

transform

Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.

Синтаксис

Значения

Функции трансформации

matrix

rotate

Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin .

scale

Масштаб элемента по горизонтали и вертикали.

Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.

scaleX

Масштабирует элемент по горизонтали.

scaleY

Масштабирует элемент по вертикали.

skewX

Наклоняет элемент на заданный угол по вертикали.

skewY

Наклоняет элемент на заданный угол по горизонтали.

translate

Сдвигает элемент на заданное значение по горизонтали и вертикали.

translateX

Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

translateY

Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

HTML5 CSS3 IE Cr Op Sa Fx

В данном примере при наведении курсора на изображение оно поворачивается на 15 градусов по часовой стрелке.

Объектная модель

[window.]document.getElementById(» elementID «).style.transform

Браузеры

Internet Explorer 9 поддерживает нестандартное свойство -ms-transform .

Chrome, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transform .

Opera до версии 12.10 поддерживает нестандартное свойство -o-transform .

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transform .

Источник