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
scale(sx, sy)
#
Nonuniform scale (and/or reflection) by the specified horizontal and vertical factors
translate(tx, ty)
#
Translation by the specified horizontal and vertical offsets; the vertical offset may be omitted, and will default to 0
rotate(a)
#
Rotation around the origin by the specified angle
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 xcoordinates by the specified angle relative to the yaxis
skewY(a)
#
Skew of the ycoordinates by the specified angle relative to the xaxis
matrix(a,b,c,d,e,f)
#
Complex transformation based on the specified matrix parameters
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 twoaxis skewlike 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 threedimensional 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 transformorigin
, transformstyle
, transformbox
, perspective
, perspectiveorigin
, and backfacevisibility
properties.
We describe transformorigin
and transformbox
in the book; they’re also included in the SVG Style Properties guide.
transformstyle
, perspective
, and perspectiveorigin
are covered in “The Next Dimension: 3D Transformations”. backfacevisibility
controls whether an element is visible when it is rotated completely around in 3D space—by default it is.