2D & 3D Transform Examples
Translate
Moves the box 20px right and 20px down on hover using translate().
Rotate
Rotates the box 45 degrees on hover using rotate().
Scale
Scales the box up 20% on hover using scale().
SkewX
Tilts the box along the X-axis by 20 degrees using skewX().
SkewY
Tilts the box along the Y-axis by 20 degrees using skewY().
Matrix
Applies a complex transformation using the matrix() function.
Translate3D
Moves the box in 3D space using translate3d().
Rotate3D
Rotates the box around a 3D vector using rotate3d().
Perspective
Adds depth to the box using perspective() and rotateY().