CSS Animations & Transitions
CSS Transform
The CSS Transform property is used to change the position, size, rotation, or shape of an element without affecting the normal document layout.
Transforms allow you to:
- Move elements
- Rotate elements
- Resize elements
- Skew elements
- Create interactive UI effects
The transform property is widely used in modern web design, animations, hover effects, and user interfaces. The supporting concepts are explained in CSS 2D Transform and CSS 3D Transform.
Syntax
Transform Syntax
css
selector {
transform: function(value);
}Transform Example
css
.box {
transform: rotate(45deg);
}Rotates the element by 45 degrees.
Attributes
| Function | Description | Example |
|---|---|---|
| translate() | Moves an element | translate(50px, 20px) |
| rotate() | Rotates an element | rotate(45deg) |
| scale() | Resizes an element | scale(1.5) |
| skew() | Tilts an element | skew(20deg) |
| matrix() | Combines multiple transforms | matrix(...) |
Transforms do not reflow surrounding content
A transformed element is painted in a different position or shape, but its original layout box still occupies space in normal flow. Transforms can create a stacking context and change the containing block used by positioned descendants. Use them for visual movement and compositing-friendly effects, not to repair document layout that should be handled by Grid, Flexbox, spacing, or positioning.
Example
CSS Transform Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Transform Example</title>
<style>
.box {
width: 150px;
height: 150px;
background-color: lightblue;
margin: 50px;
transform: rotate(15deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| transform | 36 | 12 | 16 | 9 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
Multiple transforms can be combined.
Move an Element
Translate Example
css
transform: translate(50px, 20px);Moves the element 50px right and 20px down.
Rotate an Element
Rotate Example
css
transform: rotate(45deg);Rotates the element by 45 degrees.
Scale an Element
Scale Example
css
transform: scale(1.5);Makes the element 1.5 times larger.
Skew an Element
Skew Example
css
transform: skew(20deg);Tilts the element.
Multiple Transformations
Multiple Transformations
css
transform:
translate(20px, 10px)
rotate(15deg)
scale(1.2);Applies multiple effects simultaneously.
Common Transform Functions
| Function | Effect |
|---|---|
| translate() | Move |
| rotate() | Rotate |
| scale() | Resize |
| skew() | Tilt |
| matrix() | Advanced transformation |
Conclusion
The CSS Transform property provides powerful ways to manipulate elements visually without changing the document structure. By using translate, rotate, scale, and skew, you can create engaging layouts, hover effects, and modern user interfaces.