← Back to Examples

CSS Transforms

Transforms modify an element's visual appearance. Hover to see each transform in action!

1. Translate (Move)

X
translateX(30px)
Y
translateY(30px)
X+Y
translate(20px, 20px)

2. Rotate

45°
rotate(45deg)
180°
rotate(180deg)
-45°
rotate(-45deg)

3. Scale (Resize)

1.3x
scale(1.3)
0.7x
scale(0.7)
X only
scaleX(1.5)

4. Skew (Tilt)

X
skewX(15deg)
Y
skewY(15deg)
Both
skew(10deg, 10deg)

5. Transform Origin

The pivot point for rotation/scaling:

Center
transform-origin: center
Top Left
transform-origin: top left
Bottom Right
transform-origin: bottom right

6. Combined Transforms

Multiple transforms applied together:

Hover
transform: translateY(-10px) rotate(5deg) scale(1.1);

7. 3D Transforms

Rotate in 3D space (requires perspective on parent):

X Axis
rotateX(45deg)
Y Axis
rotateY(45deg)
Both
rotateX(30deg) rotateY(30deg)

8. Card Flip Effect

Hover to flip the card:

Front
Back!
.flip-card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

← Back to Examples