Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to rotate an element using CSS?
To rotate an element using CSS, you can use the transform property with various rotation functions. This provides a powerful way to enhance the visual presentation of your website elements.
Syntax
selector {
transform: rotate(angle);
/* or */
transform: matrix(a, b, c, d, tx, ty);
/* or */
transform: rotate3d(x, y, z, angle);
}
Method 1: Using rotate() Function
The rotate() function rotates an element around a fixed point on a twodimensional plane. It accepts angle values in degrees (deg) or radians (rad).
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.rotate-box {
width: 150px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease;
}
.rotate-box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="container">
<div class="rotate-box">
Hover to Rotate
</div>
</div>
</body>
</html>
A blue box with white text appears centered on the page. When you hover over it, the box smoothly rotates 45 degrees clockwise.
Method 2: Using matrix() Function
The matrix() function creates a 2D transformation using a homogeneous matrix. For rotation, you need to calculate the cosine and sine values of the desired angle.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.matrix-box {
width: 150px;
height: 100px;
background-color: #e74c3c;
color: white;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease;
}
.matrix-box:hover {
/* matrix(cos(30°), sin(30°), -sin(30°), cos(30°), 0, 0) */
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
}
</style>
</head>
<body>
<div class="container">
<div class="matrix-box">
Matrix Rotation
</div>
</div>
</body>
</html>
A red box with white text appears centered on the page. When hovered, the box rotates 30 degrees using matrix transformation.
Method 3: Using rotate3d() Function
The rotate3d() function rotates an element around a custom axis in 3D space. It takes four parameters: x, y, z coordinates of the rotation axis, and the rotation angle.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
perspective: 1000px;
}
.rotate3d-box {
width: 150px;
height: 100px;
background-color: #2ecc71;
color: white;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease;
}
.rotate3d-box:hover {
transform: rotate3d(1, 1, 0, 45deg);
}
</style>
</head>
<body>
<div class="container">
<div class="rotate3d-box">
3D Rotation
</div>
</div>
</body>
</html>
A green box with white text appears centered on the page. When hovered, the box performs a 3D rotation around the diagonal axis, creating a tilting effect.
Conclusion
CSS provides multiple methods to rotate elements: rotate() for simple 2D rotations, matrix() for mathematical control, and rotate3d() for threedimensional effects. Choose the method that best fits your design needs.
8K+ Views
