The CSS transform property is used to visually modify the appearance of an element by rotating, scaling, skewing, or translating (moving) it.
Crucially, transforms do not affect the document layout. When you transform an element, it moves or changes shape without pushing other elements around. This makes it incredibly efficient for browser rendering and perfect for animations!
rotate(), scale(), skew(), and translate().Syntax:
element {
transform: none | transform-functions | initial | inherit;
}
| Function | Description |
|---|---|
translate(x, y) |
Moves the element along the X (horizontal) and Y (vertical) axes. |
rotate(angle) |
Spins the element clockwise or counter-clockwise (e.g., 45deg). |
scale(x, y) |
Resizes the element. A value of 1 is normal size, 2 is twice as large, 0.5 is half size. |
skew(x-angle, y-angle) |
Tilts the element along the X and Y axes, creating a slanted parallelogram effect. |
matrix() |
Combines all 2D transform methods into one single property using 6 values. |
Tip: You can combine multiple transform functions by separating them with a space! Example:
transform: translate(50px, 50px) rotate(45deg);
The translate() function moves an element from its current position. You can use translateX() to move it horizontally, translateY() to move it vertically, or both.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px dashed navy;
padding: 20px;
height: 150px;
}
.box {
width: 100px;
height: 100px;
background-color: navy;
color: white;
text-align: center;
line-height: 100px;
transition: transform 0.4s ease;
}
/* Moves 100px Right and 20px Down on Hover */
.container:hover .box {
transform: translate(100px, 20px);
}
</style>
</head>
<body>
<p>Hover over the dashed container to move the box!</p>
<div class="container">
<div class="box">Translate</div>
</div>
</body>
</html>
The rotate() function rotates an element around its origin point. Positive values (like 45deg) rotate clockwise, while negative values (like -90deg) rotate counter-clockwise.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px dashed navy;
padding: 40px;
text-align: center;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
color: navy;
border: 2px solid navy;
display: inline-block;
line-height: 100px;
font-weight: bold;
transition: transform 0.5s ease-in-out;
}
/* Spins the box 180 degrees */
.box:hover {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box">Hover Me</div>
</div>
</body>
</html>
The scale() function increases or decreases the size of an element.
scale(2) doubles the size.scale(0.5) cuts the size in half.scale(2, 1) doubles the width but leaves the height alone.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px dashed navy;
padding: 40px;
text-align: center;
}
.box {
width: 100px;
height: 100px;
background-color: navy;
color: white;
display: inline-block;
line-height: 100px;
transition: transform 0.3s ease;
}
/* Scales up by 1.5x on Hover */
.box:hover {
transform: scale(1.5);
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Scale Up</div>
</div>
</body>
</html>
The skew() function tilts an element along the X and Y axes. It accepts angles in degrees (deg). You can use skewX() or skewY() individually.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px dashed navy;
padding: 40px;
text-align: center;
}
.box {
width: 150px;
height: 80px;
background-color: lightblue;
border: 2px solid navy;
color: navy;
display: inline-block;
line-height: 80px;
font-weight: bold;
transition: transform 0.4s ease;
}
/* Tilts 20 degrees horizontally */
.box:hover {
transform: skewX(-20deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box">Skew X</div>
</div>
</body>
</html>
CSS also allows you to manipulate elements in 3D space by incorporating the Z-axis (depth).
To make 3D transforms look realistic, you must apply the perspective property to the parent container. This defines how far away the 3D object appears to the viewer.
rotateX(angle): Flips the element forward/backward like a notebook page.rotateY(angle): Flips the element left/right like a swinging door.translateZ(z): Moves the element closer to or further away from the screen.scale3d(x, y, z): Scales the element across all three axes.
<!DOCTYPE html>
<html>
<head>
<style>
.perspective-container {
perspective: 500px; /* Gives depth to the 3D effect */
padding: 50px;
text-align: center;
}
.flip-card {
width: 150px;
height: 100px;
background-color: navy;
color: white;
display: inline-block;
line-height: 100px;
transition: transform 0.6s ease;
}
/* Rotates like a door opening */
.flip-card:hover {
transform: rotateY(60deg);
}
</style>
</head>
<body>
<div class="perspective-container">
<div class="flip-card">3D RotateY</div>
</div>
</body>
</html>
Note: Sometimes 3D values don't give the expected output if they are used on basic 2D elements without a defined
perspective. It is not recommended to use 3D functions (liketranslateZ) unless you are specifically building a 3D interface.
CSS Transforms are widely supported across all modern web browsers.
(Legacy browsers like Internet Explorer 9 used prefixes like -ms-transform or -webkit-transform, but these are rarely necessary in modern web development).
Which transform function is used to increase or decrease the size of an element?