transform

<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.