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
2D transforms in CSS3
CSS 2D transforms allow you to modify the appearance of elements by translating, rotating, scaling, and skewing them in 2D space without affecting document flow.
Syntax
selector {
transform: function(value);
}
Transform Functions
| Function | Description |
|---|---|
translate(x,y) |
Moves element along x and y axes |
translateX(n) |
Moves element along x-axis only |
translateY(n) |
Moves element along y-axis only |
scale(x,y) |
Changes element size (width and height) |
scaleX(n) |
Changes element width only |
scaleY(n) |
Changes element height only |
rotate(angle) |
Rotates element by specified angle |
skewX(angle) |
Skews element along x-axis |
skewY(angle) |
Skews element along y-axis |
matrix(a,b,c,d,e,f) |
Combines all transforms using six values |
Example: Translate Transform
The following example moves a box 50px right and 30px down −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
border: 2px dashed #ccc;
position: relative;
}
.box {
width: 80px;
height: 80px;
background-color: #FF6B6B;
margin: 20px;
transition: transform 0.3s;
}
.translated {
transform: translate(50px, 30px);
background-color: #4ECDC4;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box translated"></div>
</div>
</body>
</html>
Two boxes appear: a red box in original position and a teal box moved 50px right and 30px down from its normal position.
Example: Scale and Rotate
This example demonstrates scaling and rotation transforms −
<!DOCTYPE html>
<html>
<head>
<style>
.transform-demo {
display: flex;
gap: 30px;
padding: 20px;
}
.item {
width: 60px;
height: 60px;
background-color: #9B59B6;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.scaled {
transform: scale(1.5);
background-color: #E74C3C;
}
.rotated {
transform: rotate(45deg);
background-color: #F39C12;
}
.combined {
transform: scale(1.2) rotate(30deg);
background-color: #2ECC71;
}
</style>
</head>
<body>
<div class="transform-demo">
<div class="item">1</div>
<div class="item scaled">2</div>
<div class="item rotated">3</div>
<div class="item combined">4</div>
</div>
</body>
</html>
Four colored squares appear: original purple, enlarged red (1.5x scale), orange rotated 45°, and green with combined scaling and rotation.
Example: Skew Transform
This example shows how skew transforms distort elements −
<!DOCTYPE html>
<html>
<head>
<style>
.skew-container {
display: flex;
gap: 20px;
padding: 30px;
align-items: center;
}
.skew-box {
width: 100px;
height: 60px;
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.skew-x {
transform: skewX(20deg);
}
.skew-y {
transform: skewY(15deg);
}
.skew-both {
transform: skew(15deg, 10deg);
}
</style>
</head>
<body>
<div class="skew-container">
<div class="skew-box">Normal</div>
<div class="skew-box skew-x">Skew X</div>
<div class="skew-box skew-y">Skew Y</div>
<div class="skew-box skew-both">Both</div>
</div>
</body>
</html>
Four gradient boxes showing: normal rectangle, x-axis skewed (slanted right), y-axis skewed (slanted up), and both axes skewed.
Conclusion
CSS 2D transforms provide powerful ways to manipulate element appearance without affecting layout. You can combine multiple transform functions and use transitions for smooth animations. These transforms are essential for creating modern, interactive web designs.
Updated on: 2026-03-15T12:05:47+05:30
101 Views
Advertisements