To create smooth, visually appealing UI effects, you can combine CSS transform properties with transition. The transform property allows you to move, scale, rotate, or skew elements, while transition enables these changes to happen gradually instead of instantly.

By transitioning transform properties, you can animate elements smoothly between states—such as scaling a button when hovered or rotating a card on interaction.

To achieve this, you define the desired transformation in your hover or active state, and use the transition property to specify which CSS properties should animate, the duration, timing function, and any delay.

Note

This approach is widely used for interactive UI components, making interfaces feel more dynamic and engaging to users.

The transition property animates changes to the transform property, making effects like scaling and rotating happen smoothly when you hover over the card. Only properties listed in transition will animate; here, transform is animated to create engaging, dynamic UI feedback.