Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 29, 2022 05:50 pm GMT

Ultimate CSS3 Animations Series: Rotate()

Well cover the following:

  • Setup
  • Clockwise Rotation
  • Anticlockwise Rotation
  • Lets 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: Dont 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

Lets 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)

clock wise rotation

Anticlockwise Rotation

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

transfrom: rotate(-25deg)

Anticlockwise rotation

Lets 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 youre 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.


Original Link: https://dev.to/codewithshahan/ultimate-css3-animations-series-rotate-3dkj

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To