In this tutorial we will show you the solution of how to rotate image in CSS, we can rotate an image between 0 and 360 degrees clockwise, and we can even rotate an image anti-clockwise by using negative values.
You can use the rotate CSS property to express rotation transforms apart from the transform property. This is more intuitive and eliminates the need to remember the exact order of transform functions to specify in the transform attribute.
When you truly need to rotate an image, this article will show you how to rotate the image in CSS
Step By Step Guide On How To Rotate Image In CSS :-
The CSS transform function does exactly what its name suggests: it transforms elements. Numerous functions can be applied to the transform property, and we can do a lot with it.
Rotate() is a function that shifts an element. The argument is the number of degrees we want to skew the element. Below is the code to rotate the image in CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#rotate {
width: 60px;
height: 60px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div id=”rotate” >
<img src="img/abab.jpg">
</div>
</body>
</html>
- To begin, type <! DOCTYPE html> tells the web browser that the file is in HTML format.
- The <html> element, on the other hand, is used to signal the start of HTML content.
- The < head> tag now contains the information about web pages. The <title> element is used in this tag to provide a web page title. Paired tags include the <head> and < title> tags, for example. As a result, both have the < /head> and < /title> closing tags.
- After that, make sure you've created an assets directory (folder) to hold the photos you'll need for your project. For instance, in the project we're working on, we've established an img folder and placed an image called abab.jpg in it.
- Finally, the <body> element is used to define the content of the webpage. This is where all of the stuff for the website will be written. The class rotate has been defined, and the image has been defined using the <img> element. To add photographs, you can use an absolute path, which is a full web address that begins with a domain URL (http://www.). In our case, we have written it down as abab.jpg which is the same name mentioned in our file directory.
- A < style> tag was utilised in the head tag. The image's dimensions have been given. We applied a 45-degree positive rotation using the rotate attribute.
- The </body> and </html> tags are used to close the< body> and <html> tags, respectively.
Conclusion :-
You may improve the aesthetics of your websites by rotating items. For example, when a user hovers their cursor over a box, you can apply a rotation to it.
You might also decide to rotate a link when a user hovers their mouse over it. It's entirely up to you how you use this ability and I hope this tutorial on how to rotate image in CSS helps you.
About Dikshita
