Fading Coder

One Final Commit for the Last Sprint

Home > Tech > Content

Creating 3D CSS Effects: Cubes, Spheres, and Orbital Galleries

Tech 1

Constructing a 3D Sphere with CSS

By rotating flat circular elements around the Y-axis at regular intervals, a spherical illusion is created. The transform-style: preserve-3d property is essential to maintain the 3D positioning of the child elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Sphere</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        .viewport {
            width: 600px;
            height: 600px;
            margin: 50px auto;
            position: relative;
            perspective: 800px;
        }

        .rotator {
            position: absolute;
            inset: 0;
            margin: auto;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            animation: spin-y 4s linear infinite;
        }

        @keyframes spin-y {
            to { transform: rotateY(360deg); }
        }

        .disc {
            position: absolute;
            inset: 0;
            margin: auto;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            opacity: 0.7;
        }

        .d1 { background: rgba(20, 80, 160, 0.8); transform: rotateY(0deg); }
        .d2 { background: rgba(160, 20, 80, 0.8); transform: rotateY(60deg); }
        .d3 { background: rgba(80, 160, 20, 0.8); transform: rotateY(120deg); }
        .d4 { background: rgba(160, 120, 20, 0.8); transform: rotateY(180deg); }
        .d5 { background: rgba(20, 160, 160, 0.8); transform: rotateY(240deg); }
        .d6 { background: rgba(160, 20, 160, 0.8); transform: rotateY(300deg); }
    </style>
</head>
<body>
    <div class="viewport">
        <div class="rotator">
            <div class="disc d1"></div>
            <div class="disc d2"></div>
            <div class="disc d3"></div>
            <div class="disc d4"></div>
            <div class="disc d5"></div>
            <div class="disc d6"></div>
        </div>
    </div>
</body>
</html>

Interactive Translucent Cube

A cube requires six faces positioned using rotateX, rotateY, and translateZ. Applying an animation rotates the strcuture, while animation-play-state: paused on :hover allows inspection of the cube faces.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Cube</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body { background: #111; }

        .stage {
            width: 600px;
            height: 500px;
            margin: 50px auto;
            position: relative;
            perspective: 1000px;
        }

        .cube-spin {
            position: absolute;
            inset: 0;
            margin: auto;
            width: 150px;
            height: 150px;
            transform-style: preserve-3d;
            animation: revolve 5s linear infinite;
        }

        .stage:hover .cube-spin {
            animation-play-state: paused;
        }

        @keyframes revolve {
            to { transform: rotate3d(1, 1, 0, 360deg); }
        }

        .panel {
            position: absolute;
            inset: 0;
            margin: auto;
            width: 150px;
            height: 150px;
            font-size: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            border-radius: 20px;
            opacity: 0.8;
        }

        .p-front  { background: rgba(200, 50, 50, 0.6); transform: rotateY(0deg) translateZ(75px); }
        .p-back   { background: rgba(50, 200, 50, 0.6); transform: rotateY(180deg) translateZ(75px); }
        .p-right  { background: rgba(50, 50, 200, 0.6); transform: rotateY(90deg) translateZ(75px); }
        .p-left   { background: rgba(200, 200, 50, 0.6); transform: rotateY(-90deg) translateZ(75px); }
        .p-top    { background: rgba(50, 200, 200, 0.6); transform: rotateX(90deg) translateZ(75px); }
        .p-bottom { background: rgba(200, 50, 200, 0.6); transform: rotateX(-90deg) translateZ(75px); }
    </style>
</head>
<body>
    <div class="stage">
        <div class="cube-spin">
            <div class="panel p-front">1</div>
            <div class="panel p-back">2</div>
            <div class="panel p-right">3</div>
            <div class="panel p-left">4</div>
            <div class="panel p-top">5</div>
            <div class="panel p-bottom">6</div>
        </div>
    </div>
</body>
</html>

Image-Wrapped 3D Cube

Replacing solid backgrounds with images transforms the cube into a rotating gallery. The translation distance on the Z-axis must match half the width/height of the panel to ensure edges meet precisely.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Cube</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        .scene {
            width: 600px;
            height: 500px;
            margin: 50px auto;
            position: relative;
            perspective: 1200px;
        }

        .texture-cube {
            position: absolute;
            inset: 0;
            margin: auto;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            animation: spin-cube 8s linear infinite;
        }

        .scene:hover .texture-cube {
            animation-play-state: paused;
        }

        @keyframes spin-cube {
            to { transform: rotateX(720deg) rotateY(720deg); }
        }

        .face {
            position: absolute;
            inset: 0;
            margin: auto;
            width: 300px;
            height: 300px;
        }

        .face img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }

        .f-front  { transform: rotateY(0deg) translateZ(150px); }
        .f-back   { transform: rotateY(180deg) translateZ(150px); }
        .f-right  { transform: rotateY(90deg) translateZ(150px); }
        .f-left   { transform: rotateY(-90deg) translateZ(150px); }
        .f-top    { transform: rotateX(90deg) translateZ(150px); }
        .f-bottom { transform: rotateX(-90deg) translateZ(150px); }
    </style>
</head>
<body>
    <div class="scene">
        <div class="texture-cube">
            <div class="face f-front"><img src="img1.jpg" alt=""></div>
            <div class="face f-back"><img src="img2.jpg" alt=""></div>
            <div class="face f-right"><img src="img3.jpg" alt=""></div>
            <div class="face f-left"><img src="img4.jpg" alt=""></div>
            <div class="face f-top"><img src="img5.jpg" alt=""></div>
            <div class="face f-bottom"><img src="img6.jpg" alt=""></div>
        </div>
    </div>
</body>
</html>

Luminous Sphere Effect

Applying box-shadow and border-radius: 50% to intersecting divs creates a glowing core. Positioning the rings across different axes generates a radiant, volumetric appearance.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luminous Sphere</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body { background: #000; }

        .glow-stage {
            width: 600px;
            height: 600px;
            margin: 50px auto;
            position: relative;
            perspective: 1000px;
        }

        .glow-orb {
            position: absolute;
            inset: 0;
            margin: auto;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            animation: spin-glow 4s linear infinite;
        }

        @keyframes spin-glow {
            to { transform: rotate3d(1, 1, 1, 360deg); }
        }

        .ring {
            position: absolute;
            border-radius: 50%;
            inset: 0;
            margin: auto;
        }

        .ring-lg {
            width: 200px;
            height: 200px;
            border: 2px solid #0ff;
            box-shadow: 0 0 40px #0ff;
        }

        .ring-sm {
            width: 140px;
            height: 140px;
            border: 2px solid #f0f;
            box-shadow: 0 0 40px #f0f;
        }

        .pos-z { transform: translateZ(60px); }
        .neg-z { transform: translateZ(-60px); }
        .pos-x { transform: rotateY(90deg) translateX(60px); }
        .neg-x { transform: rotateY(90deg) translateX(-60px); }
        .pos-y { transform: rotateX(90deg) translateY(60px); }
        .neg-y { transform: rotateX(90deg) translateY(-60px); }
    </style>
</head>
<body>
    <div class="glow-stage">
        <div class="glow-orb">
            <div class="ring ring-lg"></div>
            <div class="ring ring-sm pos-z"></div>
            <div class="ring ring-sm neg-z"></div>
            <div class="ring ring-lg pos-x"></div>
            <div class="ring ring-sm pos-y"></div>
            <div class="ring ring-sm neg-y"></div>
            <div class="ring ring-sm neg-x"></div>
        </div>
    </div>
</body>
</html>

3D Spherical Galery

Combining the luminous core with outward-facing image panels creates a orbital photo gallery. Images are translated away from the center along the X, Y, and Z axes while being oriented to face outward.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sphere Gallery</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body { background: #000; }

        .sphere-stage {
            width: 600px;
            height: 600px;
            margin: 50px auto;
            position: relative;
            perspective: 1000px;
        }

        .orb-gallery {
            position: absolute;
            inset: 0;
            margin: auto;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            animation: spin-orb 6s linear infinite;
        }

        @keyframes spin-orb {
            to { transform: rotate3d(1, 1, -1, 360deg); }
        }

        .core-ring {
            position: absolute;
            inset: 0;
            margin: auto;
            border-radius: 50%;
            box-shadow: 0 0 50px #0ff;
        }

        .core-lg { width: 150px; height: 150px; }
        .core-sm { width: 100px; height: 100px; }

        .photo-slot {
            position: absolute;
            inset: 0;
            margin: auto;
            width: 120px;
            height: 120px;
            border: 5px solid #fff;
            box-shadow: 0 0 20px #fff;
            opacity: 0.9;
        }

        .photo-slot img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .slot-front { transform: translateZ(180px); }
        .slot-back { transform: rotateY(180deg) translateZ(180px); }
        .slot-right { transform: rotateY(90deg) translateZ(180px); }
        .slot-left { transform: rotateY(-90deg) translateZ(180px); }
        .slot-top { transform: rotateX(90deg) translateZ(180px); }
        .slot-bottom { transform: rotateX(-90deg) translateZ(180px); }

        .core-pos-z { transform: translateZ(50px); }
        .core-neg-z { transform: translateZ(-50px); }
        .core-pos-x { transform: rotateY(90deg) translateX(50px); }
        .core-neg-x { transform: rotateY(90deg) translateX(-50px); }
        .core-pos-y { transform: rotateX(90deg) translateY(50px); }
    </style>
</head>
<body>
    <div class="sphere-stage">
        <div class="orb-gallery">
            <div class="core-ring core-lg"></div>
            <div class="core-ring core-sm core-pos-z"></div>
            <div class="core-ring core-sm core-neg-z"></div>
            <div class="core-ring core-lg core-pos-x"></div>
            <div class="core-ring core-sm core-pos-y"></div>
            <div class="core-ring core-sm core-neg-x"></div>

            <div class="photo-slot slot-front"><img src="pic1.jpg" alt=""></div>
            <div class="photo-slot slot-back"><img src="pic2.jpg" alt=""></div>
            <div class="photo-slot slot-right"><img src="pic3.jpg" alt=""></div>
            <div class="photo-slot slot-left"><img src="pic4.jpg" alt=""></div>
            <div class="photo-slot slot-top"><img src="pic5.jpg" alt=""></div>
            <div class="photo-slot slot-bottom"><img src="pic6.jpg" alt=""></div>
        </div>
    </div>
</body>
</html>

Orbital Carousel Gallery

A carousel effect is achieved by rotating elements incrementally around the Y-axis and pushing them outward along their local Z-axis. A parent container rocking back and forth on the X-axis provides a dynamic perspective shift.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Orbital Gallery</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        .orbit-stage {
            width: 800px;
            height: 600px;
            margin: 50px auto;
            position: relative;
            perspective: 1000px;
            transform-style: preserve-3d;
            animation: tilt-view 10s ease-in-out infinite;
        }

        @keyframes tilt-view {
            0%, 100% { transform: rotateX(-20deg); }
            50% { transform: rotateX(20deg); }
        }

        .orbit-ring {
            position: absolute;
            inset: 0;
            margin: auto;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            animation: spin-orbit 12s linear infinite;
        }

        @keyframes spin-orbit {
            to { transform: rotateY(360deg); }
        }

        .orbit-item {
            position: absolute;
            inset: 0;
            margin: auto;
            width: 100px;
            height: 160px;
        }

        .orbit-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

        .o1 { transform: rotateY(0deg) translateZ(350px); }
        .o2 { transform: rotateY(45deg) translateZ(350px); }
        .o3 { transform: rotateY(90deg) translateZ(350px); }
        .o4 { transform: rotateY(135deg) translateZ(350px); }
        .o5 { transform: rotateY(180deg) translateZ(350px); }
        .o6 { transform: rotateY(225deg) translateZ(350px); }
        .o7 { transform: rotateY(270deg) translateZ(350px); }
        .o8 { transform: rotateY(315deg) translateZ(350px); }

        .center-core {
            position: absolute;
            inset: 0;
            margin: auto;
            border-radius: 50%;
            box-shadow: 0 0 60px #0ff;
        }

        .core-main { width: 120px; height: 120px; }
        .core-inner { width: 80px; height: 80px; }

        .core-z-pos { transform: translateZ(40px); }
        .core-z-neg { transform: translateZ(-40px); }
        .core-x-pos { transform: rotateY(90deg) translateX(40px); }
        .core-x-neg { transform: rotateY(90deg) translateX(-40px); }
        .core-y-pos { transform: rotateX(90deg) translateY(40px); }
    </style>
</head>
<body>
    <div class="orbit-stage">
        <div class="orbit-ring">
            <div class="orbit-item o1"><img src="pic1.jpg" alt=""></div>
            <div class="orbit-item o2"><img src="pic2.jpg" alt=""></div>
            <div class="orbit-item o3"><img src="pic3.jpg" alt=""></div>
            <div class="orbit-item o4"><img src="pic4.jpg" alt=""></div>
            <div class="orbit-item o5"><img src="pic5.jpg" alt=""></div>
            <div class="orbit-item o6"><img src="pic6.jpg" alt=""></div>
            <div class="orbit-item o7"><img src="pic7.jpg" alt=""></div>
            <div class="orbit-item o8"><img src="pic8.jpg" alt=""></div>

            <div class="center-core core-main"></div>
            <div class="center-core core-inner core-z-pos"></div>
            <div class="center-core core-inner core-z-neg"></div>
            <div class="center-core core-main core-x-pos"></div>
            <div class="center-core core-inner core-x-neg"></div>
            <div class="center-core core-inner core-y-pos"></div>
        </div>
    </div>
</body>
</html>
Tags: CSS33D Transformsfrontend
Back to List

Prev: Applying Shortest Path Algorithms to Solve Congruence Problems

Next: Implementing a Generic Array Class in C++ with Correct Copy Semantics and Common Operations

Related Articles

Understanding Strong and Weak References in Java

Strong References Strong reference are the most prevalent type of object referencing in Java. When an object has a strong reference pointing to it, the garbage collector will not reclaim its memory. F...

Comprehensive Guide to SSTI Explained with Payload Bypass Techniques

Introduction Server-Side Template Injection (SSTI) is a vulnerability in web applications where user input is improper handled within the template engine and executed on the server. This exploit can r...

Implement Image Upload Functionality for Django Integrated TinyMCE Editor

Django’s Admin panel is highly user-friendly, and pairing it with TinyMCE, an effective rich text editor, simplifies content management significantly. Combining the two is particular useful for bloggi...

Leave a Comment

Anonymous

◎Feel free to join the discussion and share your thoughts.

Copyright © fadingcoder.top