CSS 3D Transforms

3D Transform Functions

transform: rotateX(45deg);

transform: rotateY(45deg);

perspective: 1000px;

transform-style: preserve-3d;

🔹 Basic 3D Rotations

3D rotations in CSS allow elements to spin around three distinct axes: X (horizontal), Y (vertical), and Z (depth), creating the illusion of three-dimensional space. The rotateX() function tilts an element forward/backward, rotateY() turns it left/right, and rotateZ() spins it like a wheel. To see these effects, the parent element often requires perspective to define the depth of the 3D space. Understanding these axes is the first step toward building immersive 3D interfaces, animated logos, and interactive 3D models directly in the browser, pushing the boundaries of modern CSS capabilities for richer user experiences.

/* X-axis rotation (horizontal flip) */
.rotate-x {
    transform: perspective(1000px) rotateX(60deg);
    width: 120px;
    height: 120px;
    background: #e74c3c;
    margin: 20px;
    border-radius: 8px;
}

/* Y-axis rotation (vertical flip) */
.rotate-y {
    transform: perspective(1000px) rotateY(60deg);
    width: 120px;
    height: 120px;
    background: #3498db;
    margin: 20px;
    border-radius: 8px;
}

/* Z-axis rotation (flat spin) */
.rotate-z {
    transform: rotateZ(45deg);
    width: 120px;
    height: 120px;
    background: #2ecc71;
    margin: 20px;
    border-radius: 8px;
}

🔹 3D Card Flip Effect

A 3D card flip effect simulates a physical card being turned over to reveal content on its back, commonly used for login forms, game cards, or feature showcases. This is achieved by placing front and back divs inside a container, using transform-style: preserve-3d, and rotating the container around the Y-axis with rotateY(180deg) on hover or click. The back face is initially hidden with backface-visibility: hidden. This effect provides an engaging, space-efficient way to display additional information, enhancing interactivity and user retention. It demonstrates practical 3D transforms and is a staple in modern UI component libraries for portfolios and e-commerce sites.

.flip-card {
    width: 200px;
    height: 120px;
    perspective: 1000px;
    margin: 20px auto;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

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

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
}

.flip-card-front {
    background: linear-gradient(45deg, #667eea, #764ba2);
}

.flip-card-back {
    background: linear-gradient(45deg, #f093fb, #f5576c);
    transform: rotateY(180deg);
}

🔹 3D Cube Animation

Creating a rotating 3D cube involves constructing a cube from six separate faces, each positioned in 3D space using translate and rotate transformations. The faces are housed within a 3D container with transform-style: preserve-3d. A keyframe animation then applies a continuous rotation transform to the entire container, making the cube spin. This project teaches advanced concepts like 3D space management, depth, and animation control. It's a popular demonstration of CSS 3D capabilities, often used in technical showcases, loading animations, or as an interactive background element to capture user attention and demonstrate a site's technical prowess.

.cube-container {
    perspective: 1000px;
    width: 200px;
    height: 200px;
    margin: 50px auto;
}

.cube {
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    animation: rotateCube 4s infinite linear;
}

.cube-face {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
}

.front  { background: #ff6b6b; transform: rotateY(0deg) translateZ(50px); }
.back   { background: #4ecdc4; transform: rotateY(180deg) translateZ(50px); }
.right  { background: #45b7d1; transform: rotateY(90deg) translateZ(50px); }
.left   { background: #96ceb4; transform: rotateY(-90deg) translateZ(50px); }
.top    { background: #feca57; transform: rotateX(90deg) translateZ(50px); }
.bottom { background: #ff9ff3; transform: rotateX(-90deg) translateZ(50px); }

@keyframes rotateCube {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}