Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Rotate an Element Using CSS
To rotate an element using CSS, is a powerful tool to control and enhance the visual presentation of a website. In this article, we will be understanding three different approaches to rotate an element Using CSS.
We are having an image and a div box with text content written in it, our task is to rotate element using CSS.
Approaches to Rotate an Element Using CSS
Here is a list of approaches to rotate an element using CSS which we will be discussing in this article with stepwise explaination and complete example codes.
Rotate using rotate() Function
To rotate an element using CSS, we will be using rotate() function of transform property. It rotates any element around a fixed point on the two-dimensional surface.
- We have used a container class which creates a flexbox using CSS "display:flex" which places the content at the center using flex properties i.e justify-content and align-items.
- We have used img tag to insert an image then used img class to set it's dimension using CSS height and width property.
- Then, we have used "transform: rotate(45deg);" to rotate the image by 45deg upon hovering using hover psuedo class.
Example
Here is a complete example code implementing above mentioned steps to rotate an element using rotate() function.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
img {
width: 250px;
height: 100px;
}
img:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<h3>
To rotate an element using CSS
</h3>
<p>
In this example we have used transform
<strong>rotate()</strong> method to
rotate an image using CSS. Hover over
image to see the rotation.
</p>
<div class="container">
<img src="/https/www.tutorialspoint.com/html/images/test.png">
</div>
</body>
</html>
Rotate using matrix() Function
In this approach, we will be using matrix() function of transform property which creates homogeneous 2D transformation matrix where first four arguments specifies linear transformation and last two specifies translation on x and y-axis respectively.
- We have used a container class which creates a flexbox using CSS flex which places the div at the center using flex properties i.e justify-content and align-items.
- Then we have used matrix class to design the box by setting it's dimension using max-width and height, applied padding and background-color, changed the text color to white and used flex to place the written content in the center.
- Then, we have used "transform: matrix();" to rotate the div element upon hovering using hover psuedo class.
Example
Here is a complete example code implementing above mentioned steps to rotate an element using matrix() function.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To rotate an element using CSS
</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.matrix {
max-width: fit-content;
padding: 5px;
height: 100px;
background-color: #04af2f;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.matrix:hover {
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
}
</style>
</head>
<body>
<h3>
To rotate an element using CSS
</h3>
<p>
In this example we have used transform
<strong>matrix</strong> method to
rotate div element using CSS.
</p>
<div class="container">
<div class="matrix">
Hover over this box to rotate div.
</div>
</div>
</body>
</html>
Rotate using rotate3d() Function
In this approach to rotate an element using CSS, we will be using rotate3d() function which rotates element around a fixed axis on the three-dimensional surface.
- We have used a container class which creates a flexbox using CSS flex which places the div at the center using flex properties i.e justify-content and align-items.
- Then we have used matrix class to design the box by setting it's dimension using max-width and height, applied padding and background-color, changed the text color to white and used flex to place the written content in the center.
- Then, we have used "transform: rotate3d(2, 1.8, 1, 45deg);" to rotate the div element by 45deg upon hovering using hover psuedo class.
Example
Here is a complete example code implementing above mentioned steps to rotate an element using rotate3d() function.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To rotate an element using CSS
</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.rotate3d {
max-width: fit-content;
padding: 5px;
height: 100px;
background-color: #04af2f;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.rotate3d:hover {
transform: rotate3d(2, 1.8, 1, 45deg);
}
</style>
</head>
<body>
<h3>
To rotate an element using CSS
</h3>
<p>
In this example we have used transform
<strong>rotate3d()</strong> method to
rotate div element using CSS.
</p>
<div class="container">
<div class="rotate3d">
Hover over this box to rotate div.
</div>
</div>
</body>
</html>
Conclusion
In this article we have understood how to rotate an element using CSS. We have discussed three approaches to rotate an element which are: by using rotate() function, by using matrix() function and by using rotate3d() function.
8K+ Views
