The <transformfunction>
CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the transform
property.
Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the Cartesian coordinate system, although homogeneous coordinates are also sometimes used.
In the Cartesian coordinate system, a twodimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation (x, y)
.
In CSS (and most computer graphics), the origin (0, 0)
represents the topleft corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be (2, 5)
, while a point 3 units to the left and 12 units up would be (3, 12)
.
Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2x2 matrix, like this:
$\left(\begin{array}{cc}a& c\\ b& d\end{array}\right)$
The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:
$\left(\begin{array}{cc}a& c\\ b& d\end{array}\right)\left(\begin{array}{cc}x& y\end{array}\right)=\left(\begin{array}{c}ax+cy\\ bx+dy\end{array}\right)$
It is even possible to apply several transformations in a row:
$\left(\begin{array}{cc}{a}_{1}& {c}_{1}\\ {b}_{1}& {d}_{1}\end{array}\right)\left(\begin{array}{cc}{a}_{2}& {c}_{2}\\ {b}_{2}& {d}_{2}\end{array}\right)=\left(\begin{array}{cc}{a}_{1}{a}_{2}+{c}_{1}{b}_{2}& {a}_{1}{c}_{2}+{c}_{1}{d}_{2}\\ {b}_{1}{a}_{2}+{d}_{1}{b}_{2}& {b}_{1}{c}_{2}+{d}_{1}{d}_{2}\end{array}\right)$
With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.
However, one major transformation is not linear, and therefore must be specialcased when using this notation: translation. The translation vector (tx, ty)
must be expressed separately, as two additional parameters.
Note: Though trickier than Cartesian coordinates, homogeneous coordinates in projective geometry lead to 3x3 transformation matrices, and can simply express translations as linear functions.
The <transformfunction>
data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.
matrix()
matrix3d()
perspective()
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
skew()
skewX()
skewY()
translate()
translate3d()
translateX()
translateY()
translateZ()
Specification  Status  Comment 

CSS Transforms Level 1 The definition of 'transform' in that specification.  Working Draft  Initial definition. 
Desktop  

Chrome  Edge  Firefox  Internet Explorer  Opera  Safari  
Basic support  Yes  ?  3.5

9

10.5  3.1 
3D support  12  ?  10  10  15  4 
Mobile  

Android webview  Chrome for Android  Edge Mobile  Firefox for Android  Opera for Android  iOS Safari  Samsung Internet  
Basic support  2  Yes  ?  Yes  11.5  3.2  Yes 
3D support  3  Yes  ?  Yes  22  3.2  Yes 
transform
property
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons AttributionShareAlike License v2.5 or later.
https://developer.mozilla.org/enUS/docs/Web/CSS/transformfunction