MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

# transform

The transform attribute defines a list of transform definitions that are applied to an element and the element's children. The items in the transform list are separated by whitespace and/or commas, and are applied from right to left.

## Usage context

Categories None Yes SVG 1.1 (2nd Edition)

### Types of transform definition

matrix(<a> <b> <c> <d> <e> <f>)
This transform definition specifies a transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix $(acebdf001)\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}$ which maps coordinates from a new coordinate system into a previous coordinate system by the following matrix equalities: $(xprevCoordSysyprevCoordSys1)=(acebdf001)(xnewCoordSysynewCoordSys1)=(axnewCoordSys+cynewCoordSys+ebxnewCoordSys+dynewCoordSys+f1) \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \\ 1 \end{pmatrix}$
translate(<x> [<y>])
This transform definition specifies a translation by x and y. This is equivalent to matrix(1 0 0 1 x y). If y is not provided, it is assumed to be zero.
scale(<x> [<y>])
This transform definition specifies a scale operation by x and y. This is equivalent to matrix(x 0 0 y 0 0). If y is not provided, it is assumed to be equal to x.
rotate(<a> [<x> <y>])
This transform definition specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotate is about the origin of the current user coordinate system. The operation corresponds to the matrix $(cosa-sina0sinacosa0001)\begin{pmatrix} \cos a & -\sin a & 0 \\ \sin a & \cos a & 0 \\ 0 & 0 & 1 \end{pmatrix}$ If optional parameters x and y are supplied, the rotate is about the point (x, y). The operation represents the equivalent of the following transform definitions list: translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>).
skewX(<a>)
This transform definition specifies a skew transformation along the x axis by a degrees. The operation corresponds to the matrix $(1tan(a)0010001)\begin{pmatrix} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}$

skewY(<a>)
This transform definition specifies a skew transformation along the y axis by a degrees. The operation corresponds to the matrix $(100tan(a)10001) \begin{pmatrix} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}$

## Example

### Rotating and Translating an SVG element

In this simple example we rotate and translate (move) an SVG element using transform SVG attribute. The original element before transform is shown with a low opacity.

CSS (optional):

text {
font: 1em sans-serif;
}

SVG:

<svg width="180" height="200"
xmlns="http://www.w3.org/2000/svg"

<!-- This is the element before translation and rotation are applied -->
<rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" fill-opacity=0.2 stroke-opacity=0.2></rect>

<!-- Now we add a text element and apply rotate and translate to both -->
<rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="translate(30) rotate(45 50 50)"></rect>
<text x="60" y="105" transform="translate(30) rotate(45 50 50)"> Hello Moz! </text>

</svg>


ScreenshotLive sample

### General Transformation

Here is a basic example to understand a general transformation. We consider the transform matrix(1,2,3,4,5,6) and draw a thick blue line from (10,20) to (30,40) in the new coordinate system. A thin white line with the same end points is drawn above it using the original coordinate system.

<svg width="160" height="230" xmlns="http://www.w3.org/2000/svg">

<g transform="matrix(1,2,3,4,5,6)">
<!-- New coordinate system (thick blue line)
x1 = 10 | x2 = 30
y1 = 20 | y2 = 40
-->
<line x1="10" y1="20" x2="30" y2="40" style="stroke-width: 10px; stroke: blue;"/>
</g>

<!-- Previous coordinate system (thin white line)
x1 = 1 * 10 + 3 * 20 + 5 = 75  | x2 = 1 * 30 + 3 * 40 + 5 = 155
y1 = 2 * 10 + 4 * 20 + 6 = 106 | y2 = 2 * 30 + 4 * 40 + 6 = 226
-->
<line x1="75" y1="106" x2="155" y2="226" style="stroke-width: 1px; stroke: white;"/>

</svg>


### Illustration of Text at the Same Position Rotated Around Different Points

All text examples in the SVG below have the same positioning on the page (x="200" y="0"), and all are rotated at 45°. The only difference is the point that anchors the rotation.

<svg viewBox="-20 -20 820 420" xmlns="http://www.w3.org/2000/svg" width="800" height="400">

<text x="200" y="0">...unrotated text; same starting position as examples below (in all cases: x="200" y="0")</text>

<circle cx="200" cy="0" r="2" style="stroke: green; stroke-width: 1; fill: green;" />
<text x="200" y="0" transform="rotate(45 200,0)" style="fill: green;" >...(1) rotate(45 200,0) (rotated 45° around a point at 200,0)</text>

<circle cx="100" cy="0" r="2" style="stroke: blue; stroke-width: 1; fill: blue;" />
<path d="M 200,0 A 100,100 0 0,1 0,0" style="stroke: blue; stroke-width: 1; fill: transparent;" />
<text x="200" y="0" transform="rotate(45 100,0)" style="fill: blue;">...(2) rotate(45 100,0) (rotated 45° around a point at 100,0)</text>

<circle cx="0" cy="0" r="2" style="stroke: red; stroke-width: 1; fill: red;" />
<path d="M 200,0 A 200,200 0 0,1 0,200" style="stroke: red; stroke-width: 1; fill: transparent;" />
<text x="200" y="0" transform="rotate(45 0,0)" style="fill: red;" >...(3) rotate(45 0,0) (rotated 45° around a point at 0,0)</text>

</svg>


## Elements

The following elements can use the transform attribute:

## Document Tags and Contributors

Tags:
Contributors to this page: JoeDeRose, Longsonr, fred.wang, seth, Jeremie, Sheppy, arasbm, shingress
Last updated by: JoeDeRose,