With CSS, it is quite easy to rotate elements. To rotate elements in CSS, we take help of the transform property, which accepts several built-in functions to rotate elements in both 2D and 3D.
To rotate elements in 2D we use the rotate() function. It accepts both positive and negative values along with a keyword deg. So, if you want to rotate an element by 90 degrees, you have to use transform: rotate(90deg).
Here is a working example of it:
Example:
.div1{
transform: rotate(0deg);
}
.div2{
transform: rotate(90deg);
}
Rotate a div 90 degrees around bottom-right corner
In the previous example, we saw how to rotate a div by 90 degrees. That div by default was rotated around its center. But you may sometimes want to rotate it around any corner, not around the center.
Well, that is exactly what we have done here. We are rotating the div around its bottom-right corner.
To set the point around which the element should rotate, we use the transform-origin property. So, if we want to rotate the div 90 degrees around its bottom-right corner, we have to use transform-origin: bottom right; along with transform: rotate(90deg);
Here is a working example of it:
Example:
.div1{
transform: rotate(90deg);
transform-origin: center;
}
.div2{
transform: rotate(90deg);
transform-origin: bottom right;
}
Rotate a div 90 degrees with animation
If you are wondering how we have created above rotation animation, don’t panic, It’s quite easy. You can also create such animations.
CSS has the animation property which helps us create animations very easily. This animation property works with CSS @keyframes rule to create animation.
The @keyframe rule defines what we want to do with the element at various points during the animation.
Here is a working example:
Example:
div{
width: 140px;
height: 100px;
background: yellow;
border: 2px dashed rgba(0,0,0,0.8);
text-align: center;
font-size: 20px;
margin-top: 50px;
animation: rotate 6s infinite;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(90deg);
}
100%{
transform: rotate(0deg);
}
}
Here, we have defined a keyframe named ‘rotate’ which starts the div rotation at 0 degrees. Once the animation reaches 50%, the div completes its 90 degrees rotation and when it finishes(100%), the div again comes back to its original state(0 degrees rotation).
This ‘rotate’ keyframe name we have used in the animation property as animation: rotate 6s infinite; , where, ‘rotate’ is the keyframe we have defined, 6s is the animation duration and inifinite is the number which decides how many times the animation should repeat.
