CSS Animations & Transitions
CSS 2D Transform
CSS 2D Transform allows you to modify an element's appearance on a two-dimensional plane using the X and Y axes.
CSS 2D Transform allows you to modify an element's appearance on a two-dimensional plane (X and Y axes).
With 2D transforms, you can:
- Move elements horizontally or vertically
- Rotate elements
- Resize elements
- Skew elements
Unlike normal positioning methods, transforms change the visual appearance of an element without affecting surrounding elements. The supporting concepts are explained in CSS Transform and CSS Transitions.
2D transforms are commonly used for:
- Hover effects
- Buttons
- Cards
- Image galleries
- Interactive UI components
Syntax
2D Transform Syntax
css
selector {
transform: function(value);
}2D Transform Example
css
.box {
transform: translateX(50px);
}Moves the element 50px to the right.
Attributes
| Function | Description | Example |
|---|---|---|
| translateX() | Moves horizontally | translateX(50px) |
| translateY() | Moves vertically | translateY(30px) |
| rotate() | Rotates element | rotate(45deg) |
| scaleX() | Changes width | scaleX(1.5) |
| scaleY() | Changes height | scaleY(1.5) |
| skewX() | Tilts horizontally | skewX(20deg) |
| skewY() | Tilts vertically | skewY(20deg) |
Order changes the result
Transform functions are applied as a list, and changing their order changes the coordinate system used by later functions. Translating and then rotating is not equivalent to rotating and then translating. Set transform-origin when the pivot matters, and verify focus outlines and clickable regions after large visual movement so the interaction still matches what users see.
Example
CSS 2D Transform Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS 2D Transform Example</title>
<style>
.box {
width: 150px;
height: 150px;
background-color: lightblue;
margin: 50px;
transform: translateX(50px) rotate(15deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| 2D transforms | 36 | 12 | 16 | 9 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
Move Horizontally
Move Horizontally
css
transform: translateX(100px);Moves element to the right.
Move Vertically
Move Vertically
css
transform: translateY(50px);Moves element downward.
Rotate
Rotate
css
transform: rotate(45deg);Rotates element clockwise.
Scale Width
Scale Width
css
transform: scaleX(2);Doubles element width.
Scale Height
Scale Height
css
transform: scaleY(2);Doubles element height.
Skew Horizontally
Skew Horizontally
css
transform: skewX(20deg);Tilts element sideways.
Skew Vertically
Skew Vertically
css
transform: skewY(20deg);Tilts element vertically.
Common 2D Transform Functions
| Function | Effect |
|---|---|
| translateX() | Horizontal movement |
| translateY() | Vertical movement |
| rotate() | Rotation |
| scaleX() | Width scaling |
| scaleY() | Height scaling |
| skewX() | Horizontal tilt |
| skewY() | Vertical tilt |
Conclusion
CSS 2D Transform provides a powerful way to move, rotate, resize, and skew elements on a two-dimensional plane. These transformations are widely used in modern web interfaces to create engaging visual effects and interactive user experiences.