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.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
