CSS 47 💻 transform perspective, rotate and rotate3d - KandZ

These three properties unlock the third dimension in CSS. With perspective, rotate3d, and transform-style, you can create stunning 3D effects like cubes, cards, and spatial interfaces.

Overview of Features

Property/Function	Description	Values
`perspective`	Distance from viewer to z=0 plane	Length (e.g., `600px`)
`rotate()`	2D rotation around a fixed point	Angle (e.g., `45deg`)
`rotate3d()`	3D rotation around a custom axis	`x, y, z, angle`

1. perspective

The perspective property gives the appearance that elements are viewed from a particular distance, creating a 3D effect.

.scene {
    perspective: 600px;
}

How It Works

     Viewer
        👁️
         |
         |  perspective: 600px
         |
    ┌────┴────┐
    │  Scene  │
    └─────────┘

Smaller values (e.g., 200px) → Stronger perspective effect
Larger values (e.g., 2000px) → Subtler perspective effect
Default → none (no perspective, flat)

Values

Value	Effect
`none`	No perspective (default, flat)
`200px`	Very strong perspective (close viewer)
`600px`	Moderate perspective (common)
`1000px`	Subtle perspective (far viewer)
`2000px`+	Very subtle perspective

Key Points:

Apply perspective to the parent of the 3D elements
Use transform-style: preserve-3d on the 3D container so children are positioned in 3D space
Perspective affects all children of the element it’s applied to

2. transform-style

The transform-style property ensures child elements are treated as 3D objects within their parent’s 3D space.

.cube {
    transform-style: preserve-3d;
}

Values

Value	Description
`flat`	Children are flattened onto the parent’s plane (default)
`preserve-3d`	Children maintain their 3D positioning

Key Points:

preserve-3d is required for 3D cubes, cards, and scenes
Without it, child 3D transforms are flattened
Apply to the container that holds the 3D faces

3. rotate()

The rotate() function rotates an element around a fixed point (its center by default) in 2D space.

.rotate:hover {
    transform: rotate(45deg);
}

Values

Value	Effect
`rotate(45deg)`	45° clockwise
`rotate(-45deg)`	45° counter-clockwise
`rotate(0.5turn)`	Half turn (180°)
`rotate(1rad)`	~57.3°

Key Points:

Positive values rotate clockwise
Negative values rotate counter-clockwise
Rotation happens in the 2D plane (no 3D effect)
Change the pivot with transform-origin

4. rotate3d()

The rotate3d() function applies a 3D rotation around a custom axis defined by x, y, z coordinates.

.box {
    transform: rotate3d(1, 1, 1, 90deg);
}

Syntax

rotate3d(x, y, z, angle)

Parameter	Description
`x`	X-axis component (0–1)
`y`	Y-axis component (0–1)
`z`	Z-axis component (0–1)
`angle`	Rotation angle (deg, rad, turn)

Common Axes

Axis	Function	Effect
X	`rotate3d(1, 0, 0, angle)`	Rotate around horizontal axis
Y	`rotate3d(0, 1, 0, angle)`	Rotate around vertical axis
Z	`rotate3d(0, 0, 1, angle)`	Rotate around depth axis (like `rotate()`)
Diagonal	`rotate3d(1, 1, 1, angle)`	Rotate around diagonal axis

Key Points:

The axis is a vector (x, y, z) — not necessarily normalized
rotate3d(1, 1, 1, 90deg) rotates along a diagonal line from one corner to the opposite
Combine with perspective for a true 3D effect
Use transform-style: preserve-3d on the parent container

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>perspective, rotate, and rotate3d</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
            background: #f8f9fa;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        h3 {
            color: #333;
            margin-top: 20px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .note {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 5px;
        }

        .highlight {
            background: #ffc107;
            color: #333;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: bold;
        }

        /* ====== PERSPECTIVE DEMO ====== */
        .perspective-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
            margin: 20px 0;
        }

        .perspective-demo {
            text-align: center;
        }

        .perspective-demo .scene {
            width: 150px;
            height: 150px;
            margin: 0 auto 10px;
            background: #e9ecef;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .perspective-demo .card {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #007bff, #6c5ce7);
            border-radius: 8px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            transition: transform 0.5s;
        }

        .perspective-demo .card.rotate-y {
            transform: rotateY(45deg);
        }

        .perspective-demo .label {
            font-weight: bold;
            color: #333;
            font-size: 0.85rem;
        }

        .perspective-200 { perspective: 200px; }
        .perspective-600 { perspective: 600px; }
        .perspective-1200 { perspective: 1200px; }

        /* ====== ROTATE DEMO ====== */
        .rotate-demo {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
            align-items: center;
            padding: 30px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px 0;
        }

        .rotate-box {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #28a745, #20c997);
            border-radius: 8px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.8rem;
            transition: transform 0.5s;
            cursor: pointer;
            text-align: center;
            padding: 5px;
        }

        .rotate-box:hover {
            transform: rotate(45deg);
        }

        .rotate-3d-box {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #dc3545, #fd7e14);
            border-radius: 8px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.8rem;
            transition: transform 0.5s;
            cursor: pointer;
            text-align: center;
            padding: 5px;
        }

        .rotate-3d-box:hover {
            transform: rotate3d(1, 1, 1, 90deg);
        }

        /* ====== 3D CUBE ====== */
        .cube-scene {
            width: 200px;
            height: 200px;
            perspective: 600px;
            margin: 50px auto;
            background: transparent;
        }

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

        @keyframes rotateCube {
            from { transform: rotateX(0) rotateY(0); }
            to { transform: rotateX(360deg) rotateY(360deg); }
        }

        .cube .face {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 2px solid rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            font-size: 1.2rem;
            text-shadow: 0 2px 5px rgba(0,0,0,0.5);
            border-radius: 8px;
        }

        .cube .front {
            background: rgba(255, 0, 0, 0.7);
            transform: translateZ(100px);
        }

        .cube .back {
            background: rgba(0, 255, 0, 0.7);
            transform: rotateY(180deg) translateZ(100px);
        }

        .cube .right {
            background: rgba(0, 0, 255, 0.7);
            transform: rotateY(90deg) translateZ(100px);
        }

        .cube .left {
            background: rgba(255, 255, 0, 0.7);
            transform: rotateY(-90deg) translateZ(100px);
        }

        .cube .top {
            background: rgba(255, 0, 255, 0.7);
            transform: rotateX(90deg) translateZ(100px);
        }

        .cube .bottom {
            background: rgba(0, 255, 255, 0.7);
            transform: rotateX(-90deg) translateZ(100px);
        }

        /* ====== PRACTICAL: 3D CARD ====== */
        .card-scene {
            width: 250px;
            height: 350px;
            perspective: 1000px;
            margin: 20px auto;
        }

        .card-3d {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s;
            cursor: pointer;
        }

        .card-scene:hover .card-3d {
            transform: rotateY(180deg);
        }

        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            text-align: center;
            color: white;
            font-weight: bold;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .card-front {
            background: linear-gradient(135deg, #007bff, #6c5ce7);
        }

        .card-front .icon {
            font-size: 3rem;
            margin-bottom: 15px;
        }

        .card-back {
            background: linear-gradient(135deg, #28a745, #20c997);
            transform: rotateY(180deg);
        }

        .card-back h4 {
            margin-top: 0;
        }

        .card-back p {
            font-size: 0.9rem;
            font-weight: normal;
            opacity: 0.95;
        }

        /* ====== PRACTICAL: 3D BUTTON ====== */
        .btn-3d {
            padding: 15px 35px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1.1em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            transform-style: preserve-3d;
            perspective: 500px;
            position: relative;
            margin: 10px;
        }

        .btn-3d:hover {
            transform: rotateX(15deg) rotateY(-15deg) scale(1.05);
            box-shadow: 0 10px 25px rgba(0, 123, 255, 0.4);
        }

        /* ====== AXIS VISUALIZATION ====== */
        .axis-demo {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            margin: 20px 0;
        }

        .axis-box {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, #007bff, #6c5ce7);
            border-radius: 8px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.75rem;
            text-align: center;
            padding: 5px;
            transition: transform 0.5s;
            cursor: pointer;
        }

        .axis-box:hover {
            transform: rotateX(45deg);
        }

        .axis-box.rotate-y:hover {
            transform: rotateY(45deg);
        }

        .axis-box.rotate-z:hover {
            transform: rotateZ(45deg);
        }

        .axis-box.rotate-3d:hover {
            transform: rotate3d(1, 1, 1, 45deg);
        }

        .axis-demo .scene-wrapper {
            perspective: 600px;
        }

        /* ====== TIPS ====== */
        .tip-box {
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            border-left: 4px solid #007bff;
            background: #f8f9fa;
        }

        .tip-box.success { border-left-color: #28a745; }
        .tip-box.warning { border-left-color: #ffc107; }
        .tip-box.danger { border-left-color: #dc3545; }
    </style>
</head>
<body>

    <h1>transform perspective, rotate, and rotate3d</h1>

    <!-- ====== 1. PERSPECTIVE DEMO ====== -->
    <section>
        <h2>1. perspective</h2>
        <p>Creates the illusion of depth by defining the distance from the viewer to the z=0 plane.</p>

        <div class="perspective-grid">
            <div class="perspective-demo">
                <div class="scene perspective-200">
                    <div class="card rotate-y">200px</div>
                </div>
                <div class="label">Strong perspective</div>
            </div>
            <div class="perspective-demo">
                <div class="scene perspective-600">
                    <div class="card rotate-y">600px</div>
                </div>
                <div class="label">Moderate perspective</div>
            </div>
            <div class="perspective-demo">
                <div class="scene perspective-1200">
                    <div class="card rotate-y">1200px</div>
                </div>
                <div class="label">Subtle perspective</div>
            </div>
        </div>

        <p class="note">Smaller <code>perspective</code> values create a stronger 3D effect (viewer is closer).</p>

        <div class="code-block">
            /* Apply perspective to the parent */
            .scene {
                perspective: 600px; /* Distance from viewer */
            }

            /* Child elements get 3D positioning */
            .card {
                transform: rotateY(45deg);
            }
        </div>
    </section>

    <!-- ====== 2. ROTATE AND ROTATE3D ====== -->
    <section>
        <h2>2. rotate() and rotate3d()</h2>
        <p>Hover over each box to see the rotation effect.</p>

        <h3>rotate() — 2D Rotation</h3>
        <div class="rotate-demo">
            <div class="rotate-box">rotate(45deg)</div>
        </div>

        <h3>rotate3d() — 3D Rotation</h3>
        <div class="rotate-demo">
            <div class="rotate-3d-box">rotate3d(1,1,1,90deg)</div>
        </div>

        <div class="code-block">
            /* 2D rotation — around a fixed point */
            .box:hover {
                transform: rotate(45deg);
            }

            /* 3D rotation — around a diagonal axis */
            .box:hover {
                transform: rotate3d(1, 1, 1, 90deg);
            }
        </div>
    </section>

    <!-- ====== 3. AXIS VISUALIZATION ====== -->
    <section>
        <h2>3. Rotation Axes</h2>
        <p>Hover over each box to see rotation around different axes.</p>

        <div class="axis-demo">
            <div class="scene-wrapper">
                <div class="axis-box">rotateX(45deg)<br>(horizontal axis)</div>
            </div>
            <div class="scene-wrapper">
                <div class="axis-box rotate-y">rotateY(45deg)<br>(vertical axis)</div>
            </div>
            <div class="scene-wrapper">
                <div class="axis-box rotate-z">rotateZ(45deg)<br>(depth axis)</div>
            </div>
            <div class="scene-wrapper">
                <div class="axis-box rotate-3d">rotate3d(1,1,1,45deg)<br>(diagonal axis)</div>
            </div>
        </div>

        <div class="code-block">
            /* Rotate around X axis (horizontal) */
            .box:hover {
                transform: rotateX(45deg);
            }

            /* Rotate around Y axis (vertical) */
            .box:hover {
                transform: rotateY(45deg);
            }

            /* Rotate around Z axis (depth) — same as rotate() */
            .box:hover {
                transform: rotateZ(45deg);
            }

            /* Rotate around a custom diagonal axis */
            .box:hover {
                transform: rotate3d(1, 1, 1, 45deg);
            }
        </div>
    </section>

    <!-- ====== 4. 3D CUBE ====== -->
    <section>
        <h2>4. 3D Cube</h2>
        <p>A complete 3D cube using <code>perspective</code>, <code>transform-style: preserve-3d</code>, and <code>rotate3d</code>.</p>

        <div class="cube-scene">
            <div class="cube">
                <div class="face front">Front</div>
                <div class="face back">Back</div>
                <div class="face right">Right</div>
                <div class="face left">Left</div>
                <div class="face top">Top</div>
                <div class="face bottom">Bottom</div>
            </div>
        </div>

        <div class="code-block">
            /* Scene with perspective */
            .scene {
                perspective: 600px;
            }

            /* Cube container preserves 3D */
            .cube {
                transform-style: preserve-3d;
                animation: rotateCube 10s infinite linear;
            }

            @keyframes rotateCube {
                from { transform: rotateX(0) rotateY(0); }
                to { transform: rotateX(360deg) rotateY(360deg); }
            }

            /* Each face positioned in 3D space */
            .front {
                transform: translateZ(100px);
            }
            .back {
                transform: rotateY(180deg) translateZ(100px);
            }
            .right {
                transform: rotateY(90deg) translateZ(100px);
            }
            .left {
                transform: rotateY(-90deg) translateZ(100px);
            }
            .top {
                transform: rotateX(90deg) translateZ(100px);
            }
            .bottom {
                transform: rotateX(-90deg) translateZ(100px);
            }
        </div>
    </section>

    <!-- ====== 5. PRACTICAL: 3D CARD FLIP ====== -->
    <section>
        <h2>5. Practical Example: 3D Card Flip</h2>
        <p>Hover over the card to flip it in 3D space.</p>

        <div class="card-scene">
            <div class="card-3d">
                <div class="card-face card-front">
                    <div class="icon">🃏</div>
                    <h3 style="margin: 0;">3D Card</h3>
                    <p style="font-weight: normal; font-size: 0.9rem;">Hover to flip</p>
                </div>
                <div class="card-face card-back">
                    <h4>✨ Back Side</h4>
                    <p>This card uses <code>rotateY(180deg)</code> and <code>backface-visibility: hidden</code> to create a 3D flip effect.</p>
                </div>
            </div>
        </div>

        <div class="code-block">
            .card-scene {
                perspective: 1000px;
            }

            .card-3d {
                transform-style: preserve-3d;
                transition: transform 0.8s;
            }

            .card-scene:hover .card-3d {
                transform: rotateY(180deg);
            }

            .card-face {
                backface-visibility: hidden;
            }

            .card-back {
                transform: rotateY(180deg);
            }
        </div>
    </section>

    <!-- ====== 6. PRACTICAL: 3D BUTTON ====== -->
    <section>
        <h2>6. Practical Example: 3D Button</h2>
        <p>Hover over the button to see a 3D tilt effect.</p>

        <div style="text-align: center;">
            <button class="btn-3d">Hover Me</button>
        </div>

        <div class="code-block">
            .btn-3d {
                transform-style: preserve-3d;
                perspective: 500px;
                transition: all 0.3s;
            }

            .btn-3d:hover {
                transform: rotateX(15deg) rotateY(-15deg) scale(1.05);
                box-shadow: 0 10px 25px rgba(0, 123, 255, 0.4);
            }
        </div>
    </section>

    <!-- ====== 7. REFERENCE TABLES ====== -->
    <section>
        <h2>7. Reference Tables</h2>

        <h3>perspective Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Effect</th>
                <th>Use Case</th>
            </tr>
            <tr>
                <td><code>none</code></td>
                <td>No perspective (flat, default)</td>
                <td>2D layouts</td>
            </tr>
            <tr>
                <td><code>200px</code></td>
                <td>Very strong perspective</td>
                <td>Dramatic 3D effects</td>
            </tr>
            <tr>
                <td><code>600px</code></td>
                <td>Moderate perspective</td>
                <td>Cards, cubes</td>
            </tr>
            <tr>
                <td><code>1000px</code></td>
                <td>Subtle perspective</td>
                <td>Realistic 3D scenes</td>
            </tr>
            <tr>
                <td><code>2000px+</code></td>
                <td>Very subtle perspective</td>
                <td>Large 3D scenes</td>
            </tr>
        </table>

        <h3>rotate() Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Effect</th>
            </tr>
            <tr>
                <td><code>rotate(45deg)</code></td>
                <td>45° clockwise</td>
            </tr>
            <tr>
                <td><code>rotate(-45deg)</code></td>
                <td>45° counter-clockwise</td>
            </tr>
            <tr>
                <td><code>rotate(0.5turn)</code></td>
                <td>Half turn (180°)</td>
            </tr>
        </table>

        <h3>rotate3d() Axes</h3>
        <table class="reference-table">
            <tr>
                <th>Axis</th>
                <th>Function</th>
                <th>Effect</th>
            </tr>
            <tr>
                <td>X</td>
                <td><code>rotate3d(1, 0, 0, angle)</code></td>
                <td>Rotate around horizontal axis</td>
            </tr>
            <tr>
                <td>Y</td>
                <td><code>rotate3d(0, 1, 0, angle)</code></td>
                <td>Rotate around vertical axis</td>
            </tr>
            <tr>
                <td>Z</td>
                <td><code>rotate3d(0, 0, 1, angle)</code></td>
                <td>Rotate around depth axis (like rotate())</td>
            </tr>
            <tr>
                <td>Diagonal</td>
                <td><code>rotate3d(1, 1, 1, angle)</code></td>
                <td>Rotate around diagonal axis</td>
            </tr>
        </table>

        <h3>Related Properties</h3>
        <table class="reference-table">
            <tr>
                <th>Property</th>
                <th>Description</th>
            </tr>
            <tr>
                <td><code>perspective</code></td>
                <td>Distance from viewer (on parent)</td>
            </tr>
            <tr>
                <td><code>perspective-origin</code></td>
                <td>Vanishing point (default: center)</td>
            </tr>
            <tr>
                <td><code>transform-style</code></td>
                <td><code>flat</code> or <code>preserve-3d</code></td>
            </tr>
            <tr>
                <td><code>backface-visibility</code></td>
                <td>Hide back face of 3D element</td>
            </tr>
        </table>
    </section>

    <!-- ====== 8. BEST PRACTICES ====== -->
    <section>
        <h2>8. Best Practices</h2>

        <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
            <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
            <ul>
                <li>Apply <code>perspective</code> to the <strong>parent</strong> of 3D elements</li>
                <li>Use <code>transform-style: preserve-3d</code> for 3D scenes</li>
                <li>Use <code>backface-visibility: hidden</code> for card flips</li>
                <li>Use <code>perspective: 600px–1000px</code> for realistic 3D effects</li>
                <li>Test 3D transforms on different devices</li>
                <li>Respect <code>prefers-reduced-motion</code> for accessibility</li>
            </ul>
        </div>

        <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
            <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
            <ul>
                <li>Don't apply <code>perspective</code> to the element being transformed (apply to parent)</li>
                <li>Don't forget <code>transform-style: preserve-3d</code> for 3D children</li>
                <li>Don't use extreme perspective values (too small or too large)</li>
                <li>Don't overuse 3D effects — they can cause motion sickness</li>
                <li>Don't forget to test with reduced motion preferences</li>
            </ul>
        </div>

        <div class="code-block">
            /* Accessibility: respect reduced motion */
            @media (prefers-reduced-motion: reduce) {
                .cube {
                    animation: none;
                }
                .card-3d {
                    transition: none;
                }
                .card-scene:hover .card-3d {
                    transform: none;
                }
            }
        </div>
    </section>

</body>
</html>

Quick Reference

Property/Function	Description	Values
`perspective`	Distance from viewer	`none`, `600px`
`rotate()`	2D rotation	Angle (`45deg`)
`rotate3d()`	3D rotation around custom axis	`x, y, z, angle`
`transform-style`	3D positioning of children	`flat`, `preserve-3d`

perspective Values

Value	Effect
`none`	No perspective (flat, default)
`200px`	Very strong perspective
`600px`	Moderate perspective
`1000px`	Subtle perspective
`2000px+`	Very subtle perspective

rotate3d() Axes

Axis	Function	Effect
X	`rotate3d(1, 0, 0, angle)`	Horizontal axis
Y	`rotate3d(0, 1, 0, angle)`	Vertical axis
Z	`rotate3d(0, 0, 1, angle)`	Depth axis
Diagonal	`rotate3d(1, 1, 1, angle)`	Diagonal axis

Related Properties

Property	Description
`perspective`	Distance from viewer (on parent)
`perspective-origin`	Vanishing point (default: center)
`transform-style`	`flat` or `preserve-3d`
`backface-visibility`	Hide back face of 3D element

Best Practices

✅ Do This:

/* Apply perspective to parent */
.scene {
    perspective: 600px;
}

/* Preserve 3D for children */
.cube {
    transform-style: preserve-3d;
}

/* Card flip */
.card-scene:hover .card-3d {
    transform: rotateY(180deg);
}

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

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cube {
        animation: none;
    }
}

❌ Don’t Do This:

/* Don't apply perspective to the transformed element */
.box {
    perspective: 600px; /* Wrong — apply to parent */
    transform: rotateY(45deg);
}

/* Don't forget transform-style */
.cube {
    /* Missing transform-style: preserve-3d */
}
.cube .face {
    transform: translateZ(100px); /* Won't work correctly */
}

/* Don't overuse 3D effects */
.everything {
    transform: rotate3d(1, 1, 1, 45deg);
    /* Can cause motion sickness */
}

Pro Tip: The key to 3D transforms is understanding the three key properties: perspective (on the parent), transform-style: preserve-3d (on the container), and the transform functions (rotate3d, translateZ, etc.) on the children. Remember: perspective goes on the parent, not the element being transformed. Use rotate3d(1, 1, 1, 90deg) for a diagonal rotation that looks impressive. And always respect prefers-reduced-motion — 3D effects can be disorienting for users with vestibular disorders!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

Overview of Features

1. perspective

How It Works

Values

2. transform-style

Values

3. rotate()

Values

4. rotate3d()

Syntax

Common Axes

Complete Example

Quick Reference

perspective Values

rotate3d() Axes

Related Properties

Best Practices

Ads Blocker Detected!!!