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.

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)

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>

Output

Browser Output

css

A light blue box will appear
The box will move 50px to the right
The box will also rotate by 15 degrees
Other page elements will not be affected

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Partial

Notes

Move Horizontally

css

transform: translateX(100px);

Moves element to the right.

Move Vertically

css

transform: translateY(50px);

Moves element downward.

Rotate

css

transform: rotate(45deg);

Rotates element clockwise.

Scale Width

css

transform: scaleX(2);

Doubles element width.

Scale Height

css

transform: scaleY(2);

Doubles element height.

Skew Horizontally

css

transform: skewX(20deg);

Tilts element sideways.

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.

PreviousCSS Transform NextCSS 3D Transform