Live CSS Transform Playground

Edit any CSS code below and see changes instantly. Hover over the boxes to see the transform effects.

TranslateX Effect

Hover me

CSS:

#box1 { transition: transform 0.5s ease; } #box1:hover { transform: translateX(50px); }

Rotate Effect

Hover me

CSS:

#box2 { transition: transform 0.8s ease; } #box2:hover { transform: rotate(180deg); }

RotateX Effect

Hover me

CSS:

#box3 { transition: transform 0.5s ease; } #box3:hover { transform: rotateX(180deg); }

RotateY Effect

Hover me

CSS:

#box4 { transition: transform 0.5s ease; } #box4:hover { transform: rotateY(180deg); }

ScaleX Effect

Hover me

CSS:

#box5 { transition: transform 0.5s ease; } #box5:hover { transform: scaleX(1.5); }

Scale Effect

Hover me

CSS:

#box6 { transition: transform 0.5s ease; } #box6:hover { transform: scale(1.2); }