3D Transforms

CSS 3D transforms add depth to web interfaces by allowing elements to rotate and move along the Z-axis. The browser simulates a 3D space using perspective projection.

perspective

Applied to the parent container with perspective: Xpx. Lower values create more dramatic foreshortening. Alternatively, use the perspective() function directly in the child's transform.

transform-style: preserve-3d

Set on a parent so that child elements are positioned in the same 3D space, enabling the card-flip effect.

3D Functions

rotateX(), rotateY(), rotateZ(), translateZ(), rotate3d(x, y, z, angle)

Example

/* Perspective on the scene container */
.scene {
    perspective: 800px;
}

/* 3D card flip */
.card-3d {
    width: 200px; height: 280px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}
.scene:hover .card-3d {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-front { background: #1a73e8; color: #fff; }
.card-back  {
    background: #e53935;
    color: #fff;
    transform: rotateY(180deg);
}

/* Tilt on hover using rotateX/Y */
.tilt:hover {
    transform: perspective(600px) rotateX(8deg) rotateY(-8deg);
}

CSS

Full Editor

Pro Tip

Set backface-visibility: hidden on both faces of a flip card — without it, the back face will be visible (mirrored) as the front rotates away, breaking the illusion.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned