CSS Transform

Written by Swapnil RajaUpdated 30 Jul 2026

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);
}

PreviousScroll Snap NextCSS 2D Transform

.box {
    transform: rotate(45deg);
}

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(...)

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>

CSS Transform

Syntax

Attributes

Transforms do not reflow surrounding content

Example

Browser Support

Notes

Move an Element

Rotate an Element

Scale an Element

Skew an Element

Multiple Transformations

Common Transform Functions

Conclusion

Function	Effect
translate()	Move
rotate()	Rotate
scale()	Resize
skew()	Tilt
matrix()	Advanced transformation