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
The CSS3 scale3d() Function
The CSS3 scale3d() function is used to scale an element in 3D space along the X, Y, and Z axes. This transform function allows you to resize elements while maintaining their proportions or creating unique scaling effects.
Syntax
transform: scale3d(x, y, z);
Parameters
| Parameter | Description |
|---|---|
x |
Scaling factor for the X-axis (horizontal) |
y |
Scaling factor for the Y-axis (vertical) |
z |
Scaling factor for the Z-axis (depth) |
Note: Values greater than 1 increase size, values less than 1 decrease size, and negative values flip the element.
Example: Basic 3D Scaling
The following example demonstrates basic 3D scaling of an image −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
align-items: center;
}
.original {
width: 100px;
height: 100px;
background-color: #4CAF50;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.scaled {
width: 100px;
height: 100px;
background-color: #FF5722;
display: flex;
align-items: center;
justify-content: center;
color: white;
transform: scale3d(0.5, 1.2, 1);
}
</style>
</head>
<body>
<div class="container">
<div class="original">Original</div>
<div class="scaled">Scaled</div>
</div>
</body>
</html>
Two boxes appear: a green "Original" box and a red "Scaled" box that is narrower (0.5x width) and taller (1.2x height).
Example: Negative Value Scaling
Using negative values flips the element along the specified axis −
<!DOCTYPE html>
<html>
<head>
<style>
.flip-container {
display: flex;
gap: 30px;
margin: 20px;
}
.box {
width: 120px;
height: 80px;
background-color: #2196F3;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.flipped {
transform: scale3d(-1, 1, 1);
}
</style>
</head>
<body>
<div class="flip-container">
<div class="box">Normal</div>
<div class="box flipped">Flipped</div>
</div>
</body>
</html>
Two blue boxes appear: "Normal" displays normally, while "Flipped" is horizontally mirrored due to the negative X-axis value.
Example: Enlarging Elements
Values greater than 1 increase the element size −
<!DOCTYPE html>
<html>
<head>
<style>
.demo-list {
list-style: none;
padding: 20px;
}
.demo-list li {
padding: 10px;
margin: 5px 0;
background-color: #E91E63;
color: white;
border-radius: 5px;
}
.enlarged {
transform: scale3d(1.2, 1.5, 1);
background-color: #9C27B0 !important;
}
</style>
</head>
<body>
<ul class="demo-list">
<li>Normal Item</li>
<li class="enlarged">Enlarged Item</li>
<li>Normal Item</li>
</ul>
</body>
</html>
A list of three items appears where the middle purple item is wider (1.2x) and taller (1.5x) than the normal pink items.
Example: Shrinking Elements
Values less than 1 decrease the element size −
<!DOCTYPE html>
<html>
<head>
<style>
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
padding: 20px;
}
.card {
padding: 20px;
background-color: #FF9800;
color: white;
text-align: center;
border-radius: 8px;
}
.mini-card {
transform: scale3d(0.7, 0.6, 1);
background-color: #607D8B;
}
</style>
</head>
<body>
<div class="card-container">
<div class="card">Card 1</div>
<div class="card mini-card">Mini Card</div>
<div class="card">Card 3</div>
</div>
</body>
</html>
Three cards in a grid layout where the middle gray "Mini Card" is smaller (0.7x width, 0.6x height) compared to the normal orange cards.
Conclusion
The scale3d() function provides precise control over element scaling in 3D space. Use values above 1 to enlarge, below 1 to shrink, and negative values to flip elements along specific axes.
Updated on: 2026-03-15T13:42:58+05:30
208 Views
Advertisements