Ultimate CSS3 Animations Series: Rotate()
We’ll cover the following:
- 📐 Setup
- ⏱ Clockwise Rotation
- 🕗 Anticlockwise Rotation
- 🏌️♂️ Let’s See in Action
- ⛳ Next
Here is the previous series of this course.
📐 Setup
Let's create a new file index.html inside a folder. Then create a new div with the class name "card" and we will applyrotate() method to this card.
Note: Don’t be confused with the word function or method. They are the same. In CSS there is no difference between these two concepts. Some developers may call them functions and others may call them methods.
Rotation is the circular movement of an object around an axis of rotation. A three-dimensional (3D) object may have an infinite number of rotation axes.
⏱ Clockwise Rotation
Let’s create a new file called styles.css and link this file to your HTML. Now, let's target our card class in CSS and write the following code:
transfrom: rotate(25deg)
Anticlockwise Rotation
The following card example rotates the card element counter-clockwise with -25deg:
transfrom: rotate(-25deg)
🏌️♂️Let’s See in Action
To see things clearly we will use this function in the hover state.
The following example will rotate the card element clockwise with 25 degrees:
HTML
<html><head></head><body><div class="card"><p>I am CSS Card</p></div></body></html>
CSS
body {
//your code...
}p {//your code...}.card {//your code...}
.card:hover {transform: rotate(25deg); /* Use a negative value to rotate counterclockwise */}
Note: Here, we used a positive value to rotate the element in the clockwise direction and a negative value can be used to rotate it in the counter-clockwise direction.
⛳Next
Next, we will learn how to use scale() function to make an element larger or smaller.
👓 Special
If you’re interested in frontend development using the JavaScript programming channel, you can subscribe to my youtube channel.
Thanks for watching and see you in the next series.
