CSS rotate egenskap

Föregående sida höger
Nästa sida row-gap

Definition and usage

rotate The attribute allows you to rotate the element.

rotate The attribute defines a value representing the degree of rotation of the element counterclockwise around the z-axis. To rotate the element around the x-axis, y-axis, or in other ways, the corresponding definition must be made.

rotate The value of the attribute can be an angle, axis name + angle, or three values + angle.

If only one angle is given, the element will rotate counterclockwise around the z-axis.
If axis name + angle is given, the element will rotate counterclockwise around the specified axis.
If three values + angle are given, these three values define a vector, and the element will rotate around this vector.

To better understand rotate attribute, please seeDemonstration.

Note:Another technique to rotate an element is to use the CSS rotate() funktion of the CSS transform attribute.

Example

Example 1

Change the rotation of the element:

div {
  rotate: 30deg;
}

Try it yourself

Example 2

when rotate When the attribute is set to a vector and angle, the element will rotate around the vector.

Here, the vector is [1 1 0] in the two-dimensional plane, with x and y coordinates, and then rotated 60 degrees:

div {
  rotate: 1 1 0 60deg;
}

Try it yourself

CSS syntax

rotate: axis angle|initial|inherit;

Attribute value

Value	Description
axis	Optional. If not set, the default value is the z-axis. Defines the axis around which the element rotates. Possible values: x y z
angle	Define the degree of rotation of the element. Possible units: deg（degrees） rad（radians） turn（圈）
vector angle	These three numbers define a vector, and the element will rotate around this vector. These three numbers are the x, y, and z coordinates of the vector. The last value is the rotation angle. Possible values: number number number angle
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
Inheritance:	No
Animation creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript syntax:	object.style.rotate="-120deg"