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
Usage of transform property with CSS
The CSS transform property is used to apply 2D or 3D transformations to an element. This property allows you to rotate, scale, translate (move), or skew elements without affecting the document flow.
Syntax
selector {
transform: transform-function(value);
}
Common Transform Functions
| Function | Description | Example |
|---|---|---|
rotate() |
Rotates element by specified angle | rotate(45deg) |
scale() |
Scales element size | scale(1.5) |
translate() |
Moves element from its position | translate(50px, 100px) |
skew() |
Skews element along X and Y axes | skew(20deg, 10deg) |
Example 1: Rotation Transform
The following example demonstrates how to rotate an element by 10 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(10deg);
}
</style>
</head>
<body>
<h2>Rotation Example</h2>
<div class="rotate-box">Rotated 10°</div>
</body>
</html>
A green rectangular box with white text "Rotated 10°" appears tilted clockwise by 10 degrees.
Example 2: Scale Transform
This example shows how to scale an element to 1.5 times its original size −
<!DOCTYPE html>
<html>
<head>
<style>
.scale-box {
width: 100px;
height: 100px;
background-color: #f44336;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 50px;
transform: scale(1.5);
}
</style>
</head>
<body>
<h2>Scale Example</h2>
<div class="scale-box">Scaled 1.5x</div>
</body>
</html>
A red square box with white text "Scaled 1.5x" appears 1.5 times larger than its original 100x100px size.
Example 3: Multiple Transforms
You can combine multiple transform functions by separating them with spaces −
<!DOCTYPE html>
<html>
<head>
<style>
.multi-transform {
width: 150px;
height: 80px;
background-color: #2196F3;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 100px;
transform: rotate(15deg) scale(1.2) translate(20px, 10px);
}
</style>
</head>
<body>
<h2>Multiple Transforms</h2>
<div class="multi-transform">Combined</div>
</body>
</html>
A blue rectangular box with white text "Combined" that is rotated 15 degrees, scaled to 1.2 times, and moved 20px right and 10px down from its original position.
Conclusion
The transform property provides powerful 2D and 3D transformation capabilities. You can use individual functions like rotate(), scale(), or combine multiple transforms for complex visual effects.
Updated on: 2026-03-15T12:50:07+05:30
119 Views
Advertisements