Easy Tutorial
❮ Prop Keygen Disabled Prop Keygen Keytype ❯

Style transform Property

Style Object

Example

Rotate a div element:


Definition and Usage

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, or skew elements.


Browser Support

Internet Explorer 10 and Firefox support the transform property.

Internet Explorer 9 supports an alternative property, msTransform (for 2D transformations only).

Opera, Chrome, and Safari support an alternative property, WebkitTransform (for both 3D and 2D transformations).


Syntax

Return the transform property:

Set the transform property:

Property Values

Value Description
none Defines that there should be no transformation.
matrix( n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values.
matrix3d <br>( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Defines a 3D transformation, using a 4x4 matrix of 16 values.
translate( x,y) Defines a 2D translation.
translate3d( x,y,z) Defines a 3D translation.
translateX( x) Defines a translation, using only the value for the X-axis.
translateY( y) Defines a translation, using only the value for the Y-axis.
translateZ( z) Defines a 3D translation, using only the value for the Z-axis.
scale( x,y) Defines a 2D scale transformation.
scale3d( x,y,z) Defines a 3D scale transformation.
scaleX( x) Defines a scale transformation by giving a value for the X-axis.
scaleY( y) Defines a scale transformation by giving a value for the Y-axis.
scaleZ( z) Defines a 3D scale transformation by giving a value for the Z-axis.
rotate( angle) Defines a 2D rotation, the angle is specified in the parameter.
rotate3d( x,y,z,angle) Defines a 3D rotation.
rotateX( angle) Defines a 3D rotation along the X-axis.
rotateY( angle) Defines a 3D rotation along the Y-axis.
rotateZ( angle) Defines a 3D rotation along the Z-axis.
skew( x-angle,y-angle) Defines a 2D skew transformation along the X- and Y-axes.
skewX( angle) Defines a 2D skew transformation along the X-axis.
skewY( angle) Defines a 2D skew transformation along the Y-axis.
perspective( n) Defines a perspective view for a 3D transformed element.
initial Sets this property to its default value. See initial
inherit Inherits this property from its parent element. See inherit

Technical Details

Default value: none
Return value: A string, representing the transform property of the element.
--- ---
CSS version CSS3
--- ---

Related Articles

CSS Reference: transform Property


Style Object

❮ Prop Keygen Disabled Prop Keygen Keytype ❯