CSS Transforms: Rotate, Scale, and More

2D Transforms

Translate (Move)

.element {
    transform: translateX(50px);   /* Move right */
    transform: translateY(-20px);  /* Move up */
    transform: translate(50px, -20px);  /* Both */
}

Rotate

.element {
    transform: rotate(45deg);    /* Clockwise */
    transform: rotate(-45deg);   /* Counter-clockwise */
}

Scale

.element {
    transform: scale(1.5);       /* 150% size */
    transform: scaleX(2);        /* Double width */
    transform: scaleY(0.5);      /* Half height */
    transform: scale(1.2, 0.8);  /* Width, height */
}

Skew

.element {
    transform: skewX(15deg);
    transform: skewY(10deg);
    transform: skew(15deg, 10deg);
}

Combining Transforms

.element {
    transform: translateX(50px) rotate(45deg) scale(1.2);
}

Order matters—transforms are applied right to left.

Transform Origin

.element {
    transform-origin: center;      /* Default */
    transform-origin: top left;
    transform-origin: 50% 100%;
    transform-origin: 20px 40px;
}

3D Transforms

Enable 3D Space

.container {
    perspective: 1000px;
}

3D Rotate

.element {
    transform: rotateX(45deg);
    transform: rotateY(45deg);
    transform: rotateZ(45deg);
    transform: rotate3d(1, 1, 0, 45deg);
}

3D Translate

.element {
    transform: translateZ(50px);
    transform: translate3d(50px, 20px, 100px);
}

Flip Card Example

.card-container {
    perspective: 1000px;
}

.card {
    width: 200px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card:hover {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.card-back {
    transform: rotateY(180deg);
}

Performance

Transforms are GPU-accelerated and very performant for animations. Prefer transforms over animating properties like top, left, width, or height.

/* Good - uses transform */
.move:hover {
    transform: translateX(100px);
}

/* Avoid - causes reflow */
.move:hover {
    left: 100px;
}