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
Non-uniform scale (and/or reflection) by the specified horizontal and vertical factors
Translation by the specified horizontal and vertical offsets; the vertical offset may be omitted, and will default to 0
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)
skew of the x-coordinates by the specified angle relative to the y-axis
Skew of the y-coordinates by the specified angle relative to the x-axis
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
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:
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)
The effects of the
transform style property are also subject to the
transform-box in the book; they’re also included in the SVG Style Properties guide.
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.