🎨 Building a 3D Neon Cube That Displays My Name 🧊

#beginners #programming #tutorial #webdev

🌟 Hey everyone! 🚀

Hope you're all having a fantastic day! Today, I want to share something super cool I built—a 3D Neon Cube that displays my name in different languages! ✨

Instead of just plain text, I thought—why not make it glow, rotate, and look futuristic? So, after playing around with HTML, CSS, and some 3D transformations, I built this neon-glowing cube that smoothly rotates! 🎨

In this post, I’ll walk you through:

✅ How I built it from scratch

✅ The magic of CSS 3D transformations

✅ How you can customize it for your own fun project

Let’s dive in! 🛠️🔥

👀 What We’re Making

Before diving into the code, here’s what it looks like:

🎥 Imagine a glowing 3D cube, gently rotating, each face displaying my name in a different language—Hindi, Bengali, Chinese, Japanese, Russian, and English.

Sounds cool? Let’s build it!

🛠️ Tools & Technologies

This only needs HTML and CSS—no JavaScript required! (Unless you want to add some extra interactivity).

HTML → To create the cube structure
CSS → To handle 3D transformations, animations, and the glowing effect

🔹 Step 1: The HTML Structure

The cube is made of six faces (front, back, left, right, top, bottom), each showing my name in a different language.

Here’s the basic HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Neon Cube</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scene">
        <div class="cube">
            <div class="face front">Madhurima (English)</div>
            <div class="face back">मधुरिमा (Hindi)</div>
            <div class="face right">মধুরিমা (Bengali)</div>
            <div class="face left">玛杜丽玛 (Chinese)</div>
            <div class="face top">マドゥリマ (Japanese)</div>
            <div class="face bottom">Мадхурима (Russian)</div>
        </div>
    </div>
</body>
</html>

💡 What’s Happening Here?

.scene → The outer container (this gives perspective for the 3D effect).
.cube → The actual cube, which we’ll rotate using CSS animations.
.face → Each individual cube face, displaying my name in different scripts.

🎨 Step 2: Styling It with CSS

Now for the fun part! Let’s style the cube, make it glow, and rotate smoothly.

/* Center everything on the page */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: radial-gradient(circle, #0d0d26, #111133);
    color: white;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

/* The Cube Scene */
.scene {
    width: 250px;
    height: 250px;
    perspective: 1200px; /* Adds depth */
}

/* The Cube */
.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 12s infinite linear;
}

/* Cube Faces */
.face {
    position: absolute;
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    border: 3px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.6);
    text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.9);
}

/* Neon glow effect */
.face::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    filter: blur(15px);
    opacity: 0.6;
    z-index: -1;
}

/* Position each face correctly */
.front  { background: #00ffcc; transform: rotateY(  0deg) translateZ(125px); }
.back   { background: #ff66ff; transform: rotateY(180deg) translateZ(125px); }
.right  { background: #ffcc00; transform: rotateY( 90deg) translateZ(125px); }
.left   { background: #ff3300; transform: rotateY(-90deg) translateZ(125px); }
.top    { background: #3399ff; transform: rotateX( 90deg) translateZ(125px); }
.bottom { background: #9933ff; transform: rotateX(-90deg) translateZ(125px); }

/* Rotation Animation */
@keyframes rotateCube {
    0% { transform: rotateY(0deg); }
    16% { transform: rotateY(90deg); }
    32% { transform: rotateY(180deg); }
    48% { transform: rotateY(270deg); }
    64% { transform: rotateX(90deg); }
    80% { transform: rotateX(-90deg); }
    100% { transform: rotateY(0deg); }
}

🔥 What’s Happening Here?

3D Perspective: The .scene gives depth using perspective: 1200px;.
Glowing Effect: Each face has box-shadow and a blurred background to make it look neon-like.
Cube Rotation: The @keyframes rotateCube makes it spin in different directions smoothly.

🎯 How Can You Customize It?

Want to make it your own? Here are a few ways:

✅ Change the Colors – Modify the background of .face for different neon effects.

✅ Change the Text – Instead of a name, you could display cool words, icons, or even a mini portfolio!

✅ Adjust the Speed – Change animation: rotateCube 12s to a faster/slower speed.

✅ Add Hover Effects – Pause rotation when the user hovers over it.

🌟 Final Thoughts

I love designs like this because they mix creativity with code. This cube isn’t just a fun experiment—it’s also a great way to learn about CSS 3D transformations, animations, and perspective.

If you build something cool with this, let me know! Drop me a message on LinkedIn or GitHub.

And if you found this useful, a star ⭐ on the repo would mean a lot! 🚀

🔗 GitHub Repo: github.com/madhurimarawat

Happy coding! 🎨🔥

Let me know what you think in the comments! ⬇️

💬 Liked it? I’d love to hear!

🔄 Have any suggestions? I’m open to feedback!

📖 Want a more detailed explanation? Just ask!

🚀 Using it in your project’s README or anywhere else? Tag me—I’d love to check it out!

Let’s keep building cool things together! 🔥✨