CSS scaleX, scaleY, and scaleZ property
The scaleX, scaleY, and scaleZ properties in CSS are part of the transform function family and are used to scale (resize) elements along the X, Y, and Z axes, respectively. These properties allow you to stretch or shrink elements horizontally, vertically, or in 3D space.
1. scaleX()
The scaleX() function scales an element along the horizontal X-axis.
Syntax:
transform: scaleX(factor);factor: A numeric value that determines how much the element will be scaled along the X-axis.- A value of
1means no scaling. - A value greater than
1stretches the element horizontally. - A value between
0and1compresses the element horizontally. - A negative value flips the element horizontally.
- A value of
Example:
.box { transform: scaleX(1.5); }- This scales the element to 1.5 times its original width, making it 50% wider.
2. scaleY()
The scaleY() function scales an element along the vertical Y-axis.
Syntax:
transform: scaleY(factor);factor: A numeric value that determines how much the element will be scaled along the Y-axis.- A value of
1means no scaling. - A value greater than
1stretches the element vertically. - A value between
0and1compresses the element vertically. - A negative value flips the element vertically.
- A value of
Example:
.box { transform: scaleY(0.5); }- This compresses the element to half of its original height, making it shorter.
3. scaleZ()
The scaleZ() function scales an element along the Z-axis, which represents the depth in 3D space. This property is primarily used in 3D transformations.
Syntax:
transform: scaleZ(factor);factor: A numeric value that determines how much the element will be scaled along the Z-axis.- A value of
1means no scaling. - Values greater than
1bring the element closer to the viewer. - Values between
0and1push the element further away from the viewer.
- A value of
Example:
.box { perspective: 500px; transform: scaleZ(2); }- This scales the element along the Z-axis, making it appear closer to the viewer in a 3D space.
Combining scaleX, scaleY, and scaleZ
You can combine these scale functions to scale an element in multiple directions simultaneously:
.box {
transform: scaleX(1.5) scaleY(0.5);
}
- This scales the element to 1.5 times its width and compresses it to half of its height.
Practical Example
HTML and CSS Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scale Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 50px;
transition: transform 0.5s ease;
}
.scale-x:hover {
transform: scaleX(2);
}
.scale-y:hover {
transform: scaleY(2);
}
.scale-z:hover {
perspective: 500px;
transform: scaleZ(2);
}
</style>
</head>
<body>
<div class="box scale-x">Scale X</div>
<div class="box scale-y">Scale Y</div>
<div class="box scale-z">Scale Z</div>
</body>
</html>
Explanation
Scale X:
- The first box will double its width when you hover over it, making it twice as wide.
Scale Y:
- The second box will double its height when you hover over it, making it twice as tall.
Scale Z:
- The third box will appear closer to the viewer when you hover over it, simulating a 3D scaling effect along the Z-axis.
Important Notes
- Aspect Ratio: When you scale an element, its aspect ratio might change unless you scale both the X and Y axes equally (e.g.,
scale(2)instead ofscaleX(2) scaleY(1)). - Negative Values: Using negative values in
scaleXorscaleYwill flip the element in the corresponding direction, creating a mirror image effect.