3D Rubik's Cube Loader Animation Tutorial

/Welcome to Day 47 of the #100DaysOfCode Challenge! Today, we will create a visually stunning animated 3D Rubik's Cube loader using HTML and CSS. This step-by-step guide will walk you through the process, providing detailed explanations and code snippets. By the end of this tutorial, you will have a fully functional and stylish loader that can be easily integrated into your projects.

Introduction

In this project, we will build a 3D Rubik's Cube loader that rotates continuously, creating an engaging visual effect. This loader can be used to indicate loading or processing time on websites. The project utilizes HTML for the structure and CSS for styling and animation.

HTML Structure

First, let's create the HTML structure of our loader. We need to define the container and each face of the Rubik's Cube.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Animated 3D Rubik Cube Loader</title>
</head>

<body>
    <!-- Loader Container -->
    <div class="my-loader">
        <!-- Rubik's Cube Structure -->
        <div class="rubiks-cube">
            <!-- Front Face of the Cube -->
            <div class="face front">
                <div class="cube" style="background: #ff3d00;"></div>
                <div class="cube" style="background: #ffeb3b;"></div>
                <div class="cube" style="background: #4caf50;"></div>
                <div class="cube" style="background: #2196f3;"></div>
                <div class="cube" style="background: #ffffff;"></div>
                <div class="cube" style="background: #ffeb3b;"></div>
                <div class="cube" style="background: #4caf50;"></div>
                <div class="cube" style="background: #2196f3;"></div>
                <div class="cube" style="background: #ff3d00;"></div>
            </div>
            <!-- Back Face of the Cube -->
            <div class="face back">
                <div class="cube" style="background: #4caf50;"></div>
                <div class="cube" style="background: #ff3d00;"></div>
                <div class="cube" style="background: #ffeb3b;"></div>
                <div class="cube" style="background: #2196f3;"></div>
                <div class="cube" style="background: #ffffff;"></div>
                <div class="cube" style="background: #ff3d00;"></div>
                <div class="cube" style="background: #ffeb3b;"></div>
                <div class="cube" style="background: #4caf50;"></div>
                <div class="cube" style="background: #2196f3;"></div>
            </div>
            <!-- Left Face of the Cube -->
            <div class="face left">
                <div class="cube" style="background: #ffeb3b;"></div>
                <div class="cube" style="background: #4caf50;"></div>
                <div class="cube" style="background: #2196f3;"></div>
                <div class="cube" style="background: #ff3d00;"></div>
                <div class="cube" style="background: #ffffff;"></div>
                <div class="cube" style="background: #4caf50;"></div>
                <div class="cube" style="background: #2196f3;"></div>
                <div class="cube" style="background: #ffeb3b;"></div>
                <div class="cube" style="background: #ff3d00;"></div>
            </div>
            <!-- Right Face of the Cube -->
            <div class="face right">
                <div class="cube" style="background: #4caf50;"></div>
                <div class="cube" style="background: #ff3d00;"></div>
                <div class="cube" style="background: #ffeb3b;"></div>
                <div class="cube" style="background: #2196f3;"></div>
                <div class="cube" style="background: #ffffff;"></div>
                <div class="cube" style="background: #ff3d00;"></div>
                <div class="cube" style="background: #ffeb3b;"></div>
                <div class="cube" style="background: #4caf50;"></div>
                <div class="cube" style="background: #2196f3;"></div>
            </div>
            <!-- Top Face of the Cube -->
            <div class="face top">
                <div class="cube" style="background: #2196f3;"></div>
                <div class="cube" style="background: #ffeb3b;"></div>
                <div class="cube" style="background: #ff3d00;"></div>
                <div class="cube" style="background: #4caf50;"></div>
                <div class="cube" style="background: #ffffff;"></div>
                <div class="cube" style="background: #ffeb3b;"></div>
                <div class="cube" style="background: #ff3d00;"></div>
                <div class="cube" style="background: #4caf50;"></div>
                <div class="cube" style="background: #2196f3;"></div>
            </div>
            <!-- Bottom Face of the Cube -->
            <div class="face bottom">
                <div class="cube" style="background: #ffffff;"></div>
                <div class="cube" style="background: #4caf50;"></div>
                <div class="cube" style="background: #2196f3;"></div>
                <div class="cube" style="background: #ff3d00;"></div>
                <div class="cube" style="background: #ffeb3b;"></div>
                <div class="cube" style="background: #4caf50;"></div>
                <div class="cube" style="background: #2196f3;"></div>
                <div class="cube" style="background: #ffffff;"></div>
                <div class="cube" style="background: #ff3d00;"></div>
            </div>
        </div>
    </div>
</body>

</html>

Explanation:

We begin with a basic HTML structure, including the DOCTYPE declaration, html, head, and body tags.
Inside the head section, we set the character encoding and viewport settings, link to an external CSS file, and set the page title.
In the body section, we create a container div with the class my-loader.
Within this container, we create another div for the Rubik's Cube with the class rubiks-cube.
Each face of the cube is represented by a div with the class face and an additional class to specify its position (e.g., front, back).
Each small cube on the faces is represented by a div with the class cube and an inline style to set its background color.

CSS Styling

Next, we will add the CSS to style and animate our Rubik's Cube. This includes the layout, colors, and animations.

/* Set body to use flexbox for centering content, with a gradient background */
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}

/* Loader container styling */
.my-loader {
    width: 200px;
    height: 200px;
    perspective: 1000px;
    /* Adds 3D perspective to the cube */
    margin: 100px auto;
    /* Centers the loader horizontally */
}

/* Rubik's cube container styling */
.rubiks-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    /* Ensures child elements are rendered in 3D space */
    animation: my-rotateCube 5s infinite linear;
    /* Animates the cube rotation */
}

/* General face styling for the Rubik's cube */
.my-loader .face {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    /* Ensures child cubes wrap to fit the face */
    width: 100%;
    height: 100%;
}

/* Positioning the front face of the cube */
.my-loader .face.front {
    transform: translateZ(100px);
}

/* Positioning the back face of the cube */
.my-loader .face.back {
    transform: rotateY(180deg) translateZ(100px);
}

/* Positioning the left face of the cube */
.my-loader .face.left {
    transform: rotateY(-90deg) translateZ(100px);
}

/* Positioning the right face of the cube */
.my-loader .face.right {
    transform: rotateY(90deg) translateZ(100px);
}

/* Positioning the top face of the cube */
.my-loader .face.top {
    transform: rotateX(90deg) translateZ(100px);
}

/* Positioning the bottom face of the cube */
.my-loader .face.bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

/* Styling for each small cube on the face */
.my-loader .cube {
    width: calc(100% / 3);
    /* Each cube is one-third the width of the face */
    height: calc(100% / 3);
    /* Each cube is one-third the height of the face */
    box-sizing: border-box;
    border: 1px solid #000;
    /* Adds border to each small cube */
}

/* Keyframes for the cube rotation animation */
@keyframes my-rotateCube {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

Explanation:

We start by centering the content on the page using flexbox and setting a gradient background.
The .my-loader class sets the size of the loader container and adds 3D perspective.
The .rubiks-cube class defines the cube's dimensions, position, and animation.
Each face of the cube is styled to be positioned correctly in 3D space using transformations.
The .cube class styles each small cube on the faces, ensuring they are one-third the width and height of the face, with borders for visibility.
The @keyframes my-rotateCube animation rotates the cube continuously.

Putting It All Together

Now that we have our HTML structure and CSS styling, our animated 3D Rubik's Cube loader is complete. You can download the full source code from the link below:

Download Full Source Code

Conclusion

Congratulations! You've created an engaging animated 3D Rubik's Cube loader using HTML and CSS. This loader can add a dynamic and interactive element to your website, making it more visually appealing to users. Don't forget to share your creation and use it in your projects. Happy coding!

For more projects and challenges, connect with me: Contact Me

Creating an Eye-Catching Animated 3D Rubik's Cube Loader

Table of contents

Introduction

HTML Structure

Explanation:

CSS Styling

Explanation:

Putting It All Together

Conclusion

Subscribe to my newsletter

Aarzoo Islam

Aarzoo Islam