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.

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

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>

Output

Browser Output

css

A light blue square will appear
The square will be rotated by 15 degrees
The element's position in the document flow remains unchanged
Only the visual appearance is transformed

Browser Support

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

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

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.

PreviousCSS Opacity NextCSS 2D Transform