CSS Properties Index   Positioning Properties

---

Rotates an element around a fixed point.

CSS	{ rotate: angle | axis name + angle | x y z + angle }
Script	object.style.rotate = angle | axis name + angle | x y z + angle

Parameter	Description	Valid Values
angle	Specifies the angle to rotate around the Z axis.	Floating point number representing an angle value expressed in degrees, gradians, radians, or turns.
axis name plus angle	The name of the axis (x, y, or z), plus the angle of rotation.	The characters x, y, or z plus a floating point number representing an angle value expressed in degrees, gradians, radians, or turns.
vectors plus angle	Defines the vector around which to rotate the element, plus the angle of rotation.	x-vector y-vector z-vector plus a floating point number representing an angle value expressed in degrees, gradians, radians, or turns.

The property is read/write with a default value of none; this attribute is not inherited.

The rotate property enables rotation of an element around a fixed point.

rotate may be specified by the keyword value none, or as an angle to rotate an element, and optionally an axis to rotate it around.

This option will rotate an object to the given angle ( around the Z axis ), similar to using a transform: rotate( ) function.

element { rotate: 90deg }

Positive angle values will rotate the object in clockwise direction. Negative values in the opposite direction.

rotate: 90deg	rotate: -4.71rad	rotate: 1turn

This second option will rotate an object to the given angle around the specified axis name.

The axis can be specified with either the x, y, or z keywords, which specify a rotation around that axis, similar to using a transform: rotateX( ), rotateY( ), or rotateZ( ) function.

element { rotate: x 180deg }

element { rotate: y 3.14rad }

element { rotate: z 1.5turn }

rotate: x 180deg	rotate: y 3.14rad	rotate: z 1.5turn

Alternately, the axis can be specified explicitly by giving three numbers representing the x, y, and z components of an origin-centered vector, similar to using a transform: rotate3d( ) function.

element { rotate: 1 2 1 360deg }

rotate: 1 2 1 360deg	rotate: 2 1 1 3.14rad	rotate: 1 1 2 1turn

Here is an example that shows the effects of applying 3D rotation using the transform: rotate3d( ) function instead, but which is functionally equivalent.

 Show me 

rotate in most cases is implemented with a transition to better illustrate the gradual transformation, unless an instantaneous or fixed change is desired, like when presenting flip horizontal or flip vertical effects.

The following example demonstrates the effects of passing different values to the rotate property. Note that the effect will revert back to normal after 2 seconds, to default to the initial state.

Notice also the use of a simple transition to better visualize the rotation.

Run Sample | View Source

scale, transform, translate