Transform Functions

The following 2D transformations functions are defined in the original SVG specifications, and are well supported. For best support when using them in the SVG transform attribute, the values should all be given as numbers, which are interpretted as user coordinates for lengths and as degrees for angles:

scale(s)#: Uniform scale by factor s

$x comma y right double arrow x prime comma y prime equals s times x comma s times y$
$(x,y)\Rightarrow (x', y') = (s\cdot x \,,\, s\cdot y)$
scale(sx, sy)#: Non-uniform scale (and/or reflection) by the specified horizontal and vertical factors

$x comma y right double arrow x prime comma y prime equals s subscript x baseline times x comma s subscript y baseline times y$
$(x,y)\Rightarrow (x', y') = (s_x\cdot x \,,\, s_y\cdot y)$
translate(tx, ty)#: Translation by the specified horizontal and vertical offsets; the vertical offset may be omitted, and will default to 0

$x comma y right double arrow x prime comma y prime equals x plut t subscript x baseline comma y plus t subscript y baseline$
$(x,y)\Rightarrow (x', y') = (x + t_x \,,\, y + t_y)$
rotate(a)#: Rotation around the origin by the specified angle

$x comma y right double arrow x prime comma y prime equals left-parenthesis cosine left-parenthesis a right-parenthesis times x minus sine left-parenthesis a right-parenthesis times y comma left-parenthesis sine left-parenthesis a right-parenthesis times x plus cosine left-parenthesis a right-parenthesis times y right-parenthesis$
$\begin{array}{l c l} (x,y)\Rightarrow (x', y') &=& \Big((\cos(a)\cdot x - \sin(a)\cdot y) \;,\; \\ & & \quad (\sin(a)\cdot x + \cos(a)\cdot y)\Big) \end{array}$
rotate(a, cx, cy)#: Rotation around the point (cx, cy) by the specified angle, a; equivalent to translate(cx, cy) rotate(a) translate(-cx, -cy)
skewX(a)#: skew of the x-coordinates by the specified angle relative to the y-axis

$x comma y right double arrow x prime comma y prime equals left-parenthesis x plus tangent left-parenthesis a right-parenthesis times y right-parenthesis comma y$
$(x,y)\Rightarrow (x', y') = \Big((x + \tan(a)\cdot y) \;,\; y\Big)$
skewY(a)#: Skew of the y-coordinates by the specified angle relative to the x-axis

$x comma y right double arrow x prime comma y prime equals x comma left-parenthesis tangent left-parenthesis a right-parenthesis times x plus y right-parenthesis$
$(x,y)\Rightarrow (x', y') = \Big(x \;,\; (\tan(a)\cdot x + y)\Big)$
matrix(a,b,c,d,e,f)#: Complex transformation based on the specified matrix parameters

$x comma y right double arrow x prime comma y prime equals left-parenthesis a times x plus c times y plus e right-parenthesis comma left-parenthesis b times x plus d times y plus f right-parenthesis$
$(x,y)\Rightarrow (x', y') = \Big((a\cdot x + c\cdot y + e) \;,\; (b\cdot x + d\cdot y + f)\Big)$

All of the above functions, except rotate(a, cx, cy), may also be used in the transform style property, albeit with more limited browser support. However, when specifying transformations with stylesheets or inline style attributes, lengths and angles must have units. Use px for user coordinate lengths. Valid angle units are deg, rad, grad, and turn. Scaling factors are always numbers without units.

The following additional shorthand 2D transformation functions are defined in the CSS transformations module, allowing you to translate or scale along one axis without accidentally changing the other:

translateX(tx)#: equivalent to translate(tx, 0)
translateY(ty)#: equivalent to translate(0,ty)
scaleX(sx)#: equivalent to scale(sx, 1)
scaleY(sy)#: equivalent to scale(1,sy)

The spec also initially proposed a two-axis skew-like transformation, skew(a,b), but it isn’t equivalent to x and y skews one after the other. It’s been deprecated, although it’s still included for compatibility with earlier versions of the spec. It’s equivalent to matrix(1, tan(b), tan(a), 1, 0, 0)

The CSS transformation level 2 module defines the following three-dimensional transformation functions, as described in “The Next Dimension: 3D Transformations”:

translate3d(tx, ty, tz)
translateZ(tz)
scale3d(sx,sy,sz)
scaleZ(sz)
rotateX(a)
rotateY(a)
rotateZ(a)
rotate3d(vx,vy,vz,a)
matrix3d(…)
perspective(d)

The effects of the transform style property are also subject to the transform-origin, transform-style, transform-box, perspective, perspective-origin, and backface-visibility properties.

We describe transform-origin and transform-box in the book; they’re also included in the SVG Style Properties guide.

transform-style, perspective, and perspective-origin are covered in “The Next Dimension: 3D Transformations”. backface-visibility controls whether an element is visible when it is rotated completely around in 3D space—by default it is.