Step-by-Step Guide to Building a Dynamic 3D Cube with HTML and CSS

3 min readMay 12, 2024

Introduction

Welcome to Day 30 of the #100DaysOfCode challenge! Today, we’re diving into an exciting project that will enhance your front-end development skills. We’ll be creating a captivating 3D rotating cube using HTML and CSS. This project is not only a great addition to your portfolio but also offers a fun way to experiment with CSS animations.

Step 1: Setting Up the Environment

Before we begin, ensure you have a text editor and a web browser installed on your system. You can download the full source code for this project from here.

Step 2: Linking Google Fonts

In the <head> section of your HTML file, import the required Google Fonts. These fonts will add style and personality to our cube.

@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;600&family=Poppins:wght@100;500;600;800;900&family=Lobster+Two:ital,wght@0,400;0,700;1,400&display=swap");

Step 3: Global Configuration Reset

Apply a global configuration reset to ensure consistent styling across different browsers. Set box-sizing, reset margins and paddings, and define a default font family.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
}

Step 4: Styling the Body

Define the styles for the body element. Set a background color, hide overflow, and center the content vertically and horizontally.

body {
    background-color: #222;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

Step 5: Creating the Cube Container

Create a container to hold our 3D rotating cube. This container will help in positioning and styling our cube effectively.

<div class="container">
    <div class="box">
        <!-- Spans for cube sides will be dynamically generated here -->
    </div>
</div>

Step 6: Styling the Cube Container and Sides

Apply styles to the container and the sides of the cube. Utilize CSS properties like transform-style, animation, and perspective for achieving the 3D effect.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .box {
    transform-style: preserve-3d;
    animation: animate 7s ease-in-out infinite alternate;
}

.container .box span {
    /* Styles for each side of the cube */
}

/* Keyframe animation */
@keyframes animate {
    0% {
        transform: perspective(500px) rotateX(0deg) rotate(5deg);
    }

    100% {
        transform: perspective(50px) rotateX(360deg) rotate(5deg);
    }
}

Step 7: Adding Content to Cube Sides

Inside each <span> element, add content for each side of the cube. You can experiment with different text and styles to customize your cube.

<span style="--i: 1">
    <i>Code</i>
    With
    <i>Aarzoo</i>
</span>

Conclusion

Congratulations! You’ve successfully created a mesmerizing 3D rotating cube using HTML and CSS. This project not only enhances your front-end development skills but also adds a visually appealing element to your portfolio. Feel free to experiment further with colors, fonts, and animations to make it uniquely yours.

Remember, consistency is key in mastering coding skills. Keep up the great work, and don’t forget to share your creations with the #100DaysOfCode community!

Contact Me

Have questions or feedback? Reach out to me via bento.me/withaarzoo and let’s connect!

Stay tuned for more exciting projects and coding adventures. Happy coding!