Guide to CSS Transforms

Introduction to CSS Transforms

CSS transforms allow you to modify the appearance and position of elements in both 2D and 3D space. Learn how to create engaging visual effects using transforms.

Transform Properties

• translate: Moves an element along the X and Y axes
• rotate: Rotates an element around a fixed point
• scale: Changes the size of an element
• skew: Distorts an element along the X and Y axes

Example Transforms

.transformed-element {
    transform: translate(50px, 20px) rotate(45deg) scale(1.5);
    transition: transform 0.3s ease;
}

.transformed-element:hover {
    transform: translate(50px, 20px) rotate(45deg) scale(2);
}