CSS Transform Scenarios
Scaling
Scaling(0,0)
Scaling(1,1)
Scaled
ScaleX(0)
ScaleY(0)
ScaleZ(0)
Multiple transforms with scale(0,0)
Translation
Translation(-10px)
Translation(10px)
Translated in 2 dimensions
Translated in 3rd dimension
Translated in 3 dimensions
Translated outside viewport
Rotation
Rotated on X axis
Rotated on Y axis
Rotated on Z axis
Rotated on 3 axes
RotateX(90deg)
RotateY(90deg)
RotateZ(90deg)
RotateX(90deg) rotateY(90deg)
Multiple with rotateX(90deg)
Multiple with rotateY(90deg)
Multiple with rotateX(90deg) rotateY(90deg)
Skew
Skewed on X axis
Skewed on Y axis
Skewed on 2 axes
Matrix
Matrix(1, 0, 0, 1, 0, 0)
Matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
Perspective
Perspective(100px)
Perspective(100px) translateZ(10px)
Perspective(100px) rotateX(45deg)
Perspective(100px) rotateY(45deg)
Perspective(100px) rotateZ(45deg)
Multiple
Multiple transforms
Multiple 3D
Multiple 3D transforms
Transform Edge Cases
Translated with text
Skewed with text
Rotated with text
Text content
Text content
Backface Visibility
Backface hidden on X axis
Backface hidden on Y axis
Backface hidden on Z axis
Backface hidden on 3 axes
Backface visible
Backface hidden on Y axis
RotateY(45deg) with visible backface and preserve-3d
Backface hidden on Y axis
Backface visible on Y axis