# 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

Test

Test

Test

Test

Test

Test

Test

### 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