Rotate - Property CSS

rotate

Summary of characteristics of the `rotate` property

Quick description

Defines a rotation to apply to the element.

Status

Standard

Usable for

HTML

Predefined values

none

Initial value

none

Inherited by default

No.

Animation type

Computed value : during an animation, the rotate property gradually changes from one value to another.

W3C Module

CSS Transforms Module

References (W3C)

CSS Transforms Module Level 2

Document status: WD (Working Draft)

Syntax diagram of `rotate`.

Syntax diagram of the rotate property.
The links in the diagram provide more details about the values.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

angle is a numeric value followed by one of the CSS angle units.
a b c are three values for defining a non-orthogonal axis of rotation.

Description of the `rotate` property.

The rotate property defines the rotations to be applied to the element, along one or more of the three axes. It supports several syntaxes, which correspond to rotations along the x, y, and z, or any intermediate axis.

The axes are defined as follows. The Z axis is directed from the screen to the reader's eye. Circular arrows indicate the direction of rotation corresponding to a positive angle.

Axes and direction of rotation

rotate:15deg x;

One element rotated
15 degrees along the X-axis

rotate:15deg y;

One element rotated
15 degrees along the y-axis

rotate:10deg z;

One element rotated
10 degrees along the Z-axis

Note: Rotations are transformations, so they don't interact with the layout at all. Rotating an element, for example, will not shift the elements that follow. The consequence is that the element that undergoes a transformation (a rotation) can collide with another element and superimpose themselves on it.

Perspective effect.

Rotations along the X and Y axes do not give the impression that the element has rotated, but rather are translated by a horizontal shrinkage for rotation around the Y axis, or a vertical shrinkage for a rotation around X. But by applying a perspective effect, we find the idea of a rotation. Refer to the perspective property or the perspective() function to learn how to apply a perspective effect.
This perspective effect has been applied to all examples further down this page, so that the rotations are noticeable whatever the axis chosen.

No rotation

Rotation around X-axis

Rotation around the X-axis without perspective effect

Rotation around X-axis

Rotation around the X-axis with perspective effect

Difference with functions.

The rotate() function also exists, and plays a similar role when combined with the transform property... with one small difference: the rotate property does not rotate the axes. This can cause significant differences, for example when a rotation and a translation are chained.

Example 1

Example 2

Values for `rotate`.

rotate: none;

No rotation is applied to the element.
rotate: 35deg;

If only one unique value is specified, the element rotates about the z-axis.

The value must be followed by one of the angular units (see the CSS angle units). Percentages are not accepted.

Negative values are accepted, they cause a rotation in an anti-clockwise direction.
rotate: x 35deg;

It is possible to specify the axis around which the rotation is to be carried out.

Rotations along the x or y axes produce a visible effect of rotation only if a perspective effect has been applied. For more on this, see the perspective property or the perspective() function.

rotate:x 10deg
Rotate around the X-axis
Syntax equivalent to
transform:rotateX(10deg);

rotate:y 10deg
Rotation around the Y-axis
Syntax equivalent to
transform:rotateY(10deg);

rotate:z 10deg
Rotation around the Z-axis
Syntax equivalent to
transform:rotateZ(10deg);
ou à rotate:10deg
rotate: 1 2 1 10deg;

The first three values define the axis of rotation in 3D; The fourth value is the angle of rotation around this axis.

We have the following equivalences:

4-value syntax Equivalent to

rotate: 1 0 0 45deg; rotate:45deg x;

rotate: 0 1 0 30deg; rotate:30deg y;

rotate: 0 0 1 15deg; rotate:15deg z;

But this four-value syntax goes much further than the basic syntaxes: it allows you to define any axis of rotation in 3D.
rotate: initial; (none) rotate: inherit; rotate: revert; rotate: revertLayer; rotate: unset;

These values are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

4-value syntax	Equivalent to
`rotate: 1 0 0 45deg;`	`rotate:45deg x;`
`rotate: 0 1 0 30deg;`	`rotate:30deg y;`
`rotate: 0 0 1 15deg;`	`rotate:15deg z;`

Animation of the `rotate` property.

The rotate property is particularly suitable for animations. Its angular parameter, which varies between 0 and 360 degrees gives very smooth animations.

The first example below is simply an animation of the rotation around the Z axis (in the 2D plane). The second animation is more complex: we varied the orientation of the axis of rotation.

Manipulating the `rotate` property programmatically.

Change the value of `rotate` with Javascript.

Javascript supports two syntaxes for changing the value of a property. The example below applies the value 30 grades to the rotate property. Remember that, in the absence of an indication of the axis, the rotation takes place around the Z axis.


	let el = document.getElementById('id');
	el.style['rotate'] = '30grad';
	// or
	let el = document.getElementById('id');
	el.style.rotate = '30grad';

Read the value of `rotate` in Javascript.

The code below retrieves the value of the rotate property provided that it has been assigned in the style of the element, in HTML. Property values assigned via a CSS selector are not taken into account by this code.


	let el = document.getElementById('id');
	let value = el.style['rotate'];
	// or
	let el = document.getElementById('id');
	let value = el.style.rotate;

Read the calculated value of `rotate` in Javascript.

The calculated value is always defined, it can be a value explicitly assigned to the property, an inherited value, or the the initial value of the property (none in the case of rotate).

The angle of rotation is returned in degrees, regardless of the unit used at the time of the assignment of the property.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('rotate');

Change the value of the `rotate` property with JQuery.


 $('#id').css('rotate', '30grad');

Read the calculated value of the `rotate` property with JQuery.

As in Javascript, the angle is returned in degrees, after conversion if necessary from another unit.


	let value = $('#id').css('rotate');

Test it yourself.

Use the buttons below to apply the entered value to the rotate property and then display either the value as applied, or the calculated value. This second option allows you to see how the value of rotate is stored (serialized). It can be seen that all units are converted to degrees.

Simulator.

rotate :

none

Demonstration

Browsers compatibility with `rotate`.

The rotate property is now well recognized by browsers. The syntax using the rotate() function with the transform property is a valid alternative, however.

Column 1

General support for 2D transformations, including rotations, element translations, and more

Column 2

General support for 3D animations, including support for perspective management and support for the backface-visibility property.

Column 3

Support by the browsers of the property rotate which, as its name indicates, performs a rotation about any axis.