CSS Mini Project

Explore two core CSS topics. Use the buttons to switch demos, pick options in Controls, and watch the result in the separate Output box.

Controls (Flexbox)

Justify Content (main axis)

Align Items (cross axis)

Flex Direction

Output

1
2
3
Tip: Try changing direction to column and play with align-items.

Controls (Transform)

Rotate

Scale

Translate

Skew & Matrix

Output

BOX
This output box has perspective, so 3D transforms like rotateX/translateZ are visible.