Ultimate CSS3 Animations Series: Rotate()

Programming with Shahan - Jul 29 '22 - - Dev Community

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 apply rotate() 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) 
Enter fullscreen mode Exit fullscreen mode

clock wise rotation

Anticlockwise Rotation

The following card example rotates the card element counter-clockwise with -25deg:

transfrom: rotate(-25deg) 
Enter fullscreen mode Exit fullscreen mode

Anticlockwise rotation

🏌️‍♂️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>
Enter fullscreen mode Exit fullscreen mode

CSS

body {
//your code...
}

p {
//your code...
}

.card {
//your code...
}

.card:hover {
transform: rotate(25deg); /* Use a negative value to rotate  counterclockwise */
}
Enter fullscreen mode Exit fullscreen mode

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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player