Using SVG with CSS3 and HTML5 — Supplementary Material

Example code and online extras for the O'Reilly Media book by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey.

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:


Uniform scale by factor s

(x,y)(x,y)=(sx,sy)(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,y)(x,y)=(sxx,syy)(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,y)(x,y)=(x+tx,y+ty)(x,y)\Rightarrow (x', y') = (x + t_x \,,\, y + t_y)

Rotation around the origin by the specified angle

(x,y)(x,y)=((cos(a)xsin(a)y),(sin(a)x+cos(a)y)) \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)


skew of the x-coordinates by the specified angle relative to the y-axis

(x,y)(x,y)=((x+tan(a)y),y)(x,y)\Rightarrow (x', y') = \Big((x + \tan(a)\cdot y) \;,\; y\Big)

Skew of the y-coordinates by the specified angle relative to the x-axis

(x,y)(x,y)=(x,(tan(a)x+y))(x,y)\Rightarrow (x', y') = \Big(x \;,\; (\tan(a)\cdot x + y)\Big)

Complex transformation based on the specified matrix parameters

(x,y)(x,y)=((ax+cy+e),(bx+dy+f))(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:


equivalent to translate(tx, 0)


equivalent to translate(0,ty)


equivalent to scale(sx, 1)


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”:

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.