Menu Home

transform

osbo.com | CSS | Properties | transform

The transform CSS property applies transformations to the coordinate system.

Syntax

CSS

transform: value;

JS

object.style.transform = "value";

Values

<'transform'> = none | <transform-list>
none

No transform.

<transform-list> = <transform-function>+
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>
<matrix()> = matrix( <number>#{6} )

Specifies a 2D transformation in the form of a transformation matrix of the six values a, b, c, d, e, f.

<translate()> = translate( <length-percentage> , <length-percentage>? )

Specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter.

<translateX()> = translateX( <length-percentage> )

Specifies a translation by the given amount in the X direction.

<translateY()> = translateY( <length-percentage> )

Specifies a translation by the given amount in the Y direction.

<scale()> = scale( <number> , <number>? )

Specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters.

<scaleX()> = scaleX( <number> )

Specifies a 2D scale operation using the [sx,1] scaling vector, where sx is given as the parameter.

<scaleY()> = scaleY( <number> )

Specifies a 2D scale operation using the [1,sy] scaling vector, where sy is given as the parameter.

<rotate()> = rotate( [ <angle> | <zero> ] )

Specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property.

<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )

Specifies a 2D skew by [ax,ay] for X and Y. Exists for compatibility reasons and should not be used in new content. Use skewX() or skewY() instead, noting that the behavior of skew() is different from multiplying skewX() with skewY().

<skewX()> = skewX( [ <angle> | <zero> ] )

Specifies a 2D skew transformation along the X axis by the given angle.

<skewY()> = skewY( [ <angle> | <zero> ] )

Specifies a 2D skew transformation along the Y axis by the given angle.

<matrix3d()> = matrix3d( <number>#{16} )

Specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order.

<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )

Specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively.

<translateZ()> = translateZ( <length> )

Specifies a 3D translation by the vector [0,0,tz] with the given amount in the Z direction.

<scale3d()> = scale3d( <number> , <number>, <number> )

Specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.

<scaleZ()> = scaleZ( <number> )

Specifies a 3D scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.

<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )

Specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters.

<rotateX()> = rotateX( [ <angle> | <zero> ] )

Same as rotate3d(1, 0, 0, <angle>).

<rotateY()> = rotateY( [ <angle> | <zero> ] )

Same as rotate3d(0, 1, 0, <angle>).

<rotateZ()> = rotateZ( [ <angle> | <zero> ] )

Same as rotate3d(0, 0, 1, <angle>), which is a 3d transform equivalent to the 2d transform rotate(<angle>).

<perspective()> = perspective( <length [0,∞]> )

Specifies a perspective projection matrix. This matrix scales points in X and Y based on their Z value, scaling points with positive Z values away from the origin, and those with negative Z values towards the origin. Points on the z=0 plane are unchanged. The parameter represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect.

Initial

none

Examples

matrix

matrix3d

perspective

rotate

rotate3d

rotateX

rotateY

rotateZ

scale

scale3d

scaleX

scaleY

scaleZ

skew

skewX

skewY

translate

translate3d

translateX

translateY

translateZ

JS

Internal

backface-visibility

perspective

perspective-origin

rotate

scale

transform-box

transform-origin

transform-style

translate

External

World Wide Web Consortium (W3C)