Rotate The Image With A Click On Javascript

Michael Zippo 04.11.2021

👻 Check our latest review to choose the best laptop for Machine Learning engineers and Deep learning tasks!

The CSS rotate () function distorts an element by a certain number of degrees. You can rotate an element clockwise using a positive number of degrees. Or you can rotate an item counterclockwise using a negative number.

Today we are going to learn how to rotate elements with CSS. Why rotate an element? Rotating elements make your web page more interactive. Used correctly, a rotating element will add to the aesthetics of your site.

While reading this article, please refer to companion repository , so you can see the concepts in action. Knowing how to rotate an element will be a great addition to your CSS toolbox.

CSS rotate ()

The CSS rotate () function allows you to rotate an element on a 2D axis. The rotate () function takes one argument: the angle at which you want to rotate your web element. You can rotate an element clockwise or counterclockwise.

Let’s look at the syntax of the rotate () function:

The "angle" value represents the number of degrees the element should rotate. You can specify a clockwise rotation using a positive number of degrees (for example 45). Or you can rotate in the opposite direction using a negative degree value (eg -39).

The rotate () function can be applied to any HTML element. For example, you can rotate a paragraph of text. Or you can rotate an image.

An HTML rotation appears as soon as you render the page, so there is no visible rotation. To see the rotation in action, you need to use a CSS transition . Transitions change the state of an element when an action is taken, such as when a cursor hovers over an element.

rotate () CSS Example

Let’s go on and create our HTML page to put a rotating box on. Add a box as a div and assign a class to it (we’ll call it "rotate").

Now let’s add some styling:

Refresh. Great, we have a colored box. With this colored box, we have everything we need to start using the rotate () function.

To rotate our box, we must first discuss the transform property.

The as its name suggests, transforms elements. One of the functions we can apply to it is rotate (). The transform property can take on a lot of other functions, and there is a lot we can do with the transformation. Rotate is just one of them.

The rotate function moves an element. We need one argument: the number of degrees we want to tilt the element. Let’s go ahead and apply a positive 35 degree rotation:

We’ve rotated our box ! Touch yourself on the back.

Rotation allows for sophisticated user interface ideas or rotating images. For example, you can rotate an image 180 degrees. If you need to rotate this image elsewhere, save it and use it accordingly.

Another thing you can rotate is text. Say you create a layout that mimics a magazine, you can actually rotate the text to emphasize the text elements.

And that’s not all you can do with rotate (). The rotation function allows us to create really interesting animations !

Let’s go from there ’before and let’s use the CSS: hover selector on our div to apply a nice rotation effect:

Wiki