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
Selected Reading
How to apply a 2D or 3D transformation to an element with CSS
The CSS transform property allows you to apply 2D or 3D transformations to elements. You can rotate, scale, translate, or skew elements to create dynamic visual effects.
Syntax
selector {
transform: transform-function(value);
}
Common Transform Functions
| Function | Description | Example |
|---|---|---|
rotate() |
Rotates the element by specified degrees | rotate(45deg) |
scale() |
Scales the element size | scale(1.5) |
translate() |
Moves the element from its current position | translate(50px, 100px) |
skew() |
Skews the element along X and Y axes | skew(20deg, 10deg) |
Example: 2D Rotation
The following example demonstrates how to rotate an element by 15 degrees −
<!DOCTYPE html>
<html>
<head>
<style>
.rotate-box {
width: 200px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 50px;
transform: rotate(15deg);
}
</style>
</head>
<body>
<h2>2D Rotation Example</h2>
<div class="rotate-box">Rotated Element</div>
</body>
</html>
A green rectangular box with white text "Rotated Element" appears rotated 15 degrees clockwise from its original position.
Example: Multiple Transformations
You can combine multiple transform functions by separating them with spaces −
<!DOCTYPE html>
<html>
<head>
<style>
.multi-transform {
width: 150px;
height: 80px;
background-color: #ff6b6b;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 100px;
transform: rotate(30deg) scale(1.2) translate(20px, 10px);
transition: transform 0.3s ease;
}
.multi-transform:hover {
transform: rotate(0deg) scale(1) translate(0px, 0px);
}
</style>
</head>
<body>
<h2>Multiple Transformations</h2>
<div class="multi-transform">Hover Me</div>
<p>Hover over the box to see the transformation reset.</p>
</body>
</html>
A red box appears rotated 30 degrees, scaled to 120%, and translated 20px right and 10px down. On hover, it smoothly transitions back to its normal state.
Example: 3D Transformation
For 3D effects, you can use functions like rotateX(), rotateY(), and perspective −
<!DOCTYPE html>
<html>
<head>
<style>
.perspective-container {
perspective: 1000px;
margin: 100px auto;
width: 200px;
height: 200px;
}
.cube {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #3498db, #2ecc71);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transform: rotateY(45deg) rotateX(15deg);
transition: transform 0.5s ease;
}
.cube:hover {
transform: rotateY(90deg) rotateX(30deg);
}
</style>
</head>
<body>
<h2>3D Transformation</h2>
<div class="perspective-container">
<div class="cube">3D Element</div>
</div>
<p>Hover to see 3D rotation effect.</p>
</body>
</html>
A square element with gradient background appears with 3D perspective, rotated along Y and X axes. On hover, it rotates further to create a 3D spinning effect.
Conclusion
The transform property is powerful for creating dynamic visual effects. Combine multiple transform functions for complex animations and use 3D transforms with perspective for depth effects.
Updated on: 2026-03-15T12:50:30+05:30
204 Views
Advertisements