Translate

The translate function moves an element from its original position. Hover over the boxes to see the movement.

translateX(40px)

Hover

Moves element 40px to the right.

translateY(-30px)

Hover

Moves element 30px upward.

translate(30px, -20px)

Hover

Moves element right and up simultaneously.

.move-right { transform: translateX(40px); }
.move-up { transform: translateY(-30px); }
.move-diagonal { transform: translate(30px, -20px); }
/* Percentage moves relative to element size */
.move-50-percent { transform: translateX(50%); }

Rotate

The rotate function rotates an element around its center point. Use degrees (deg), turns, or radians.

rotate(45deg)

Hover

Rotates 45 degrees clockwise.

rotate(-90deg)

Hover

Rotates 90 degrees counter-clockwise.

rotate(360deg)

Hover

Full 360-degree rotation.

.rotate-45 { transform: rotate(45deg); }
.rotate-negative { transform: rotate(-90deg); }
.rotate-full { transform: rotate(360deg); }
.rotate-turn { transform: rotate(0.5turn); } /* Same as 180deg */

Scale

The scale function resizes an element. Values greater than 1 enlarge, less than 1 shrink.

scale(1.3)

Hover

Enlarges element to 130% of original size.

scale(0.7)

Hover

Shrinks element to 70% of original size.

scaleX(1.5)

Hover

Stretches element horizontally only.

scaleY(1.5)

Hover

Stretches element vertically only.

.scale-up { transform: scale(1.3); }
.scale-down { transform: scale(0.7); }
.scale-x { transform: scaleX(1.5); }
.scale-y { transform: scaleY(1.5); }
.mirror { transform: scaleX(-1); } /* Flips horizontally */

Skew

The skew function tilts an element along the X and/or Y axis.

skewX(20deg)

Hover

Tilts element along the X axis.

skewY(15deg)

Hover

Tilts element along the Y axis.

skew(10deg, 5deg)

Hover

Tilts along both axes simultaneously.

.skew-x { transform: skewX(20deg); }
.skew-y { transform: skewY(15deg); }
.skew-both { transform: skew(10deg, 5deg); }

Transform Origin

The transform-origin property sets the point around which transforms occur. The red dot shows the origin point.

transform-origin: center

Hover

Default. Rotates around the center point.

transform-origin: top left

Hover

Rotates around the top-left corner.

transform-origin: bottom right

Hover

Rotates around the bottom-right corner.

.origin-center { transform-origin: center; } /* Default */
.origin-top-left { transform-origin: top left; }
.origin-bottom-right { transform-origin: bottom right; }
.origin-custom { transform-origin: 20% 80%; }
.origin-pixel { transform-origin: 10px 10px; }

Combined Transforms

Chain multiple transforms in a single transform property. Order matters - transforms are applied right to left.

rotate + scale

Hover

Rotates 15° and scales to 120%.

translate + rotate + scale

Hover

Moves up, rotates, and scales.

scale + skew + translate

Hover

Shrinks, skews, and moves right.

.combined-1 { transform: rotate(15deg) scale(1.2); }
.combined-2 { transform: translateY(-20px) rotate(-10deg) scale(1.1); }
.combined-3 { transform: scale(0.9) skewX(-5deg) translateX(20px); }
/* Order matters: transforms apply right-to-left */

3D Transforms

Use perspective and rotateX/Y/Z for 3D effects. Perspective creates depth by defining the viewer's distance.

rotateX(45deg)

Hover

Rotates around the horizontal axis.

rotateY(45deg)

Hover

Rotates around the vertical axis.

rotateX + rotateY

Hover

Rotates in 3D space along both axes.

3D Flip Card

Front

Back

Card flips to reveal back side.

3D Cube

Spinning 3D cube with transform-style: preserve-3d.

Perspective Comparison

200px

500px

1000px

Lower perspective = more dramatic 3D effect.

.container { perspective: 500px; }
.rotate-x { transform: rotateX(45deg); }
.rotate-y { transform: rotateY(45deg); }
.rotate-3d { transform: rotateX(20deg) rotateY(30deg); }

/* Flip card */
.card { perspective: 1000px; }
.card-inner { transform-style: preserve-3d; transition: transform 0.6s; }
.card:hover .card-inner { transform: rotateY(180deg); }
.card-face { backface-visibility: hidden; }
.card-back { transform: rotateY(180deg); }