The rotate () function in CSS performs a two-dimensional transformation of the rotation around the fixed center on the element. The block does not deform and does not affect the position of neighboring HTML containers. The method allows you to specify the angle of rotation. In addition, it is possible to specify an arbitrary center of rotation.
Block transformation
In CSS, rotate () is a transform function, so it must be passed to the transform property of the element.
element { transform: rotate(45deg); }
The first and only argument is the angle at which the object will be rotated. The rotation is carried out in two-dimensional space. For three-dimensional transformations, there are functions in CSS rotateX (), rotateY (), rotateZ () and rotate3d ().
The space originally occupied by the element on the page remains reserved for it. Visual movement occurs in a new layer without shifting neighboring blocks.
Angle of rotation
The angle argument passed to the method must be of the <angle> CSS type. It consists of a numerical value and a unit of measurement deg (from the English degree - degree).
A positive angle determines the rotation of the object in the clockwise direction, a negative angle determines the rotation in the opposite direction.
Center of rotation
By default, a block rotates around its geometric center. To change this point, you must use the transform-origin property.
By the standard, it takes three parameters that determine the coordinates along the X, Y, and Z axes. But since rotate () in CSS is a two-dimensional transformation, it will be enough to pass only two values.
element { transform: rotate(45deg); transform-origin: 20px 100%; }
The coordinate on each axis can be determined in any valid length units, percent of the block size, or using the keywords top, bottom, left, right. The origin is located in the upper left corner of the rectangular container.
Rotation animation
The transform property lends itself well to dynamic change, therefore, CSS allows you to create an animation of the rotation of an element in two-dimensional space.
If you want to rotate an object in response to a specific user action, for example, hovering over the cursor, you can use the CSS transition property, which determines the delayed change in the value of other properties.
element { transition: transform 2s; } element:hover { transform: rotate(180deg); }
No transformations are applied to the original element, but when you hover over it, the block will rotate 180 degrees smoothly for two seconds. When the user moves the cursor, the same smooth rotation will occur in the initial position.
A more complex way to animate an object is to define a sequence for changing frames for it using the properties of the animation group and the @keyframes rule.
element { animation-name: rotate; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
A rotate animation is applied to the specified element, which determines a complete rotation from 0 to 360 degrees in two seconds. The animation-iteration-count property sets the animation to repeat indefinitely, and the animation-timing-function sets the transition effect to smooth. The combination of properties in CSS animation with rotate transformations allows you to create beautiful dynamic effects.