Elevate Your Web Design Skills: Building 3D Cube using CSS

In the world of web design, adding three-dimensional elements can elevate the visual appeal of your website. One such element is the 3D cube, which provides a sense of depth and interactivity. In this tutorial, we will walk you through the process of creating an eye-catching 3D cube using HTML and CSS.

Whether you want to use it for showcasing products or simply adding a unique design element to your website, this tutorial will guide you step by step.

<div class="main-container">
    <div class="cube">
        <div class="left"></div>
        <div class="right"></div>
        <div class="front"></div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</div>

This HTML structure demonstrates the creation of a virtual cube using div elements and CSS classes. The cube is enclosed within the main-container div and comprises six individual sides: left, right, front, back, top, and bottom, each represented by corresponding div elements with their unique classes. The cube class encapsulates the entire cube structure, and each side of the cube is represented by specific classes such as left, right, front, back, top, and bottom.

This code sets the foundation for a 3D cube structure that can be further styled and transformed using CSS to create visual effects such as rotations and perspectives for a compelling user experience.

To bring this code to life, CSS styles need to be applied for rendering the cube with appropriate colors, dimensions, and positioning to simulate a 3D appearance.

:root{
    --width:200px;
    --height:200px;
}

.main-container {
    display: flex;
    min-height: 100vh;
    min-width: 300px;
    align-items: center;
    justify-content: center;
}

body {
    background: black;
}

.cube {
    width: var(--width);
    height: var(--height);
    position: relative;
    transform-origin: center;
    transform-style: preserve-3d;
    animation: rotate 6s linear infinite;
}

.cube div {
    width: 100%;
    height: 100%;
    position: absolute;
    border: 1px solid rgba(220, 220, 220, 0.388);
}

.left {
    transform: rotateY(90deg);
    background: #ff00008a;
    transform-origin: left;
}

.right {
    transform-origin: right;
    transform: rotateY(270deg);
    background: #0080006e;
}

.front {
    background: #80008073;
}

.back {
    transform: translateZ(-200px) rotateX(0deg);
    background: #6aff006a;
}

.top {
    transform-origin: top;
    background: #d000ffbd;
    transform: rotateX(270deg);
}

.bottom {
    transform-origin: bottom;
    background: #ffa500a1;
    transform: rotateX(90deg);
}

@keyframes rotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

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

Container Styling: The "main-container" is a flex container that centers its content both horizontally and vertically on the web page. It has a black background.

Cube Styling: The .cube class represents a 3D cube. It has a fixed width and height of 200px and uses transform-style: preserve-3d for creating 3D transformations. It also features an animation called rotate for continuous rotation.

Individual Sides: The cube is constructed using six div elements with different classes (left, right, front, back, top, bottom) to represent each side. They have specific background colors and transformation properties to simulate a 3D cube.

Rotation: The @keyframes animation rotate is defined to rotate the cube on all three axes (X, Y, and Z) from 0 to 360 degrees, creating a continuous rotation effect.

Perspective: The cube's 3D effect is achieved by specifying transform-origin and using transformations like rotateX and rotateY for different sides.

Borders: Each side has a 1px solid border with a translucent color, giving a wireframe appearance to the cube.

Color Scheme: Various background colors (e.g., red, green, purple, yellow) are applied to the cube's sides to differentiate them and create a visually appealing effect.

Background: The web page's background is set to black, providing a dark backdrop for the 3D cube.

The flexibility of HTML and CSS allows for endless possibilities in designing and animating 3D objects on the web, making it a valuable tool for enhancing user experiences, creating stunning visuals, and adding depth to web applications.

Feel free to explore and experiment with different CSS properties and values to achieve the desired 3D effects for your cube or other similar elements in your web projects. This code structure serves as a starting point for your creative endeavors in web development and design.

Download

Elevate Your Web Design Skills: Building 3D Cube using CSS

You might like