Trails > Design > CSS Transforms & Transitions

CSS Transforms & Transitions

Learn how to rotate, move, skew, and scale elements with 2D Transforms. Add Transitions to make them smoothly change from one state to another.

Exercises

Transition: Property & Duration

Make elements to gradually change from one style to another.

Transform: Scale

Increase or decrease the size of an element

Transform: Rotate

Rotate an element clockwise or counterclockwise

Transform: Translate

Move an element from its current position

Tranform: Skew

Tilt an element

Combining Transforms

Combine multiple transforms into one property

Transform: Transform-Origin

Control the start point for the transform (scale, rotate, and skew) of an element

Transition: Transition-Timing

Specify the speed curve of a transition effect

Transition: Transition-Delay

Control the start time of your transitions