Transform

The <transform-function> values that make up a transform list: moving, scaling, rotating, skewing and projecting a box without changing its place in the layout. The functions in a list apply in order, each in the coordinate system the previous one left behind, so translate(100px) rotate(45deg) and rotate(45deg) translate(100px) end up in different places. The transform, transform-origin and separate translate, rotate and scale properties are under Transforms & motion path.

2D transforms

translate()

Moves the box by an x offset and an optional y offset (default 0). Percentages refer to the box's own width and height, so translate(-50%, -50%) shifts a box back by half its own size.

Syntaxtranslate( <length-percentage> , <length-percentage>? )
Returns<transform-function>
SupportChrome 1 · Firefox 3.5 · Safari 3.1
Speccss-transforms-1
 
position: absolute; inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
Centre an absolutely positioned box of unknown size.

translateX(), translateY()

Moves the box along one axis only.

SyntaxtranslateX( <length-percentage> )
translateY( <length-percentage> )
Returns<transform-function>
SupportChrome 1 · Firefox 3.5 · Safari 3.1
Speccss-transforms-1

scale()

Resizes the box from its transform origin. One value scales both axes; two set x and y separately. 1 (or 100%) is the original size, and negative values mirror the box.

Syntaxscale( [ <number> | <percentage> ]#{1,2} )
Returns<transform-function>
SupportChrome 1 · Firefox 3.5 · Safari 3.1
Speccss-transforms-2

scaleX(), scaleY()

Resizes the box along one axis only. scaleX(-1) flips it horizontally.

SyntaxscaleX( [ <number> | <percentage> ] )
scaleY( [ <number> | <percentage> ] )
Returns<transform-function>
SupportChrome 1 · Firefox 3.5 · Safari 3.1
Speccss-transforms-2

rotate()

Turns the box clockwise around its transform origin by an angle. Negative angles turn it anticlockwise.

Syntaxrotate( [ <angle> | <zero> ] )
Returns<transform-function>
SupportChrome 1 · Firefox 3.5 · Safari 3.1
Speccss-transforms-1
 
transform: rotate(0.25turn);
A quarter turn clockwise.

skew()

Slants the box by an angle along the x axis and an optional angle along the y axis (default 0).

Syntaxskew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
Returns<transform-function>
SupportChrome 1 · Firefox 3.5 · Safari 3.1
Speccss-transforms-1

skewX(), skewY()

Slants the box along one axis only.

SyntaxskewX( [ <angle> | <zero> ] )
skewY( [ <angle> | <zero> ] )
Returns<transform-function>
SupportChrome 1 · Firefox 3.5 · Safari 3.1
Speccss-transforms-1

matrix()

A 2D transform given directly as the six values a, b, c, d, tx, ty of an affine matrix. Browsers report computed transforms in this form; by hand, the named functions are easier to read.

Syntaxmatrix( <number>#{6} )
Returns<transform-function>
SupportChrome 1 · Firefox 3.5 · Safari 3.1
Speccss-transforms-1

3D transforms

translate3d()

Moves the box along the x, y and z axes. The z offset must be a length, not a percentage. It only looks closer or farther when a perspective is set.

Syntaxtranslate3d( <length-percentage> , <length-percentage> , <length> )
Returns<transform-function>
SupportChrome 12 · Firefox 10 · Safari 4
Speccss-transforms-2

translateZ()

Moves the box towards (positive) or away from (negative) the viewer.

SyntaxtranslateZ( <length> )
Returns<transform-function>
SupportChrome 12 · Firefox 10 · Safari 4
Speccss-transforms-2

scale3d()

Scales the box along the x, y and z axes. The z factor only has a visible effect on content that has depth, such as children in a preserved 3D context.

Syntaxscale3d( [ <number> | <percentage> ]#{3} )
Returns<transform-function>
SupportChrome 12 · Firefox 10 · Safari 4
Speccss-transforms-2

scaleZ()

Scales the box along the z axis only.

SyntaxscaleZ( [ <number> | <percentage> ] )
Returns<transform-function>
SupportChrome 12 · Firefox 10 · Safari 4
Speccss-transforms-2

rotate3d()

Rotates the box by an angle around an axis given by the vector (x, y, z). rotate3d(0, 0, 1, a) is the same as rotate(a).

Syntaxrotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
Returns<transform-function>
SupportChrome 12 · Firefox 10 · Safari 4
Speccss-transforms-2

rotateX(), rotateY(), rotateZ()

Rotates the box around one axis. rotateX() tips it forwards or backwards, rotateY() turns it like a door, and rotateZ() is the same as rotate().

SyntaxrotateX( [ <angle> | <zero> ] )
rotateY( [ <angle> | <zero> ] )
rotateZ( [ <angle> | <zero> ] )
Returns<transform-function>
SupportChrome 12 · Firefox 10 · Safari 4
Speccss-transforms-2
 
.card { transition: transform 0.4s; }
.card:hover { transform: perspective(800px) rotateY(180deg); }
A card that flips over on hover.

perspective()

Applies a perspective projection, as if the viewer were the given distance from the screen. Smaller distances give stronger depth. It affects the functions after it in the list, so put it first. none means no perspective.

Syntaxperspective( [ <length [0,∞]> | none ] )
Returns<transform-function>
SupportChrome 12 · Firefox 10 · Safari 4
Speccss-transforms-2

The perspective property does the same for all of an element's children at once, sharing one vanishing point.

matrix3d()

A 3D transform given directly as the 16 values of a 4×4 matrix, in column-major order.

Syntaxmatrix3d( <number>#{16} )
Returns<transform-function>
SupportChrome 12 · Firefox 10 · Safari 4
Speccss-transforms-2