CSS Transform

The CSS transform property allows you to rotate, scale, move, or skew elements. This creates dynamic and eye-catching effects without changing the element’s actual size or position.

Simple example of using transform

In the following example, we rotate a box by 45 degrees on hover. By adding a transition, the rotation happens gradually.

The example demonstrates the use of rotate(), which rotates an element by a specified angle.

Main transform functions

Transform can modify elements in several ways: rotation, scaling, translation, and skewing. These can also be combined for complex effects.

Function	Description
rotate()	Rotates the element by a given degree (e.g., rotate(45deg)).
scale()	Scales the element up or down (e.g., scale(1.5)).
translate()	Moves the element along the X and Y axes (e.g., translate(50px, 20px)).
skew()	Skews the element along the X and Y axes (e.g., skew(20deg, 10deg)).

Tips for using transform

Transform is a powerful tool for visually manipulating elements. Here are some tips:

Combine transform with transitions or animations for smooth movements.
Use the transform-origin property to define where rotation or scaling should occur from.
Remember that transform does not affect the surrounding layout, only the visual appearance.