DEV Community

Cover image for Create a Stunning 3D Cube with Pure CSS....
Siddhesh Mithbavkar
Siddhesh Mithbavkar

Posted on

Create a Stunning 3D Cube with Pure CSS....

#css #webdev #animation #tutorial

Ready to add a dynamic, eye-catching element to your portfolio or website? While 3D animations might seem like the domain of complex JavaScript libraries, you can create impressive, hardware-accelerated 3D effects using only HTML and CSS.

In this tutorial, we'll build on the classic 3D rotating cube concept and give it a modern twist. We will create a cube that showcases the logos of popular web technologies like HTML, CSS, JavaScript, React, Node.js, and Bootstrap.

Let's dive in!

The Building Blocks: HTML Structure

First, we need to set up the HTML. The structure is simple: a container element to act as our 3D "scene" and an element for our cube, which will contain six divs, one for each face.

<div class="scene">
 <div class="cube">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Entering the 3D Space with CSS

Now for the magic. We'll use CSS to style our elements and create the 3D effect.

Setting the Scene

The perspective property is the key to creating a sense of depth. It defines how far the 3D scene is from the viewer. We apply this to our .scene container. A lower value creates a more dramatic, distorted look, while a higher value is more subtle.

.scene {
  width: 200px;
  height: 200px;
  perspective: 600px;
}
Enter fullscreen mode Exit fullscreen mode

Assembling the Cube

To ensure the faces of the cube are positioned in 3D space rather than being flattened, we must apply transform-style: preserve-3d to the .cube container.

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}
Enter fullscreen mode Exit fullscreen mode

Styling the Faces with Logos

Instead of a solid color, we'll use background-image to apply a unique logo to each face of the cube. We'll also set background-size: cover to ensure the logos fit neatly on each face. The transform property is then used with rotateX(), rotateY(), and translateZ() to position each face in 3D space, folding them into a cube shape.

Here is the complete CSS, including the logo URLs and the final animation setup.

/* Basic Scene Setup */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  margin: 0;
}

.scene {
  width: 200px;
  height: 200px;
  perspective: 600px;
}

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

/* General Face Styling */
.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid #555;
  background-size: cover; /* Ensures the image covers the face */
  background-position: center; /* Centers the image on the face */
}

/* Individual Faces with Background Images and Positions */
.front {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg');
  transform: rotateY(0deg) translateZ(100px);
}

.back {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg');
  transform: rotateY(180deg) translateZ(100px);
}

.right {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png');
  transform: rotateY(90deg) translateZ(100px);
}

.left {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b2/Bootstrap_logo.svg');
  transform: rotateY(-90deg) translateZ(100px);
}

.top {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg');
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/d/d9/Node.js_logo.svg');
  transform: rotateX(-90deg) translateZ(100px);
}
Enter fullscreen mode Exit fullscreen mode

Bringing it to Life: The Animation

A static cube is cool, but a rotating one is even better. We can achieve this with CSS @keyframes. We'll define an animation that rotates the cube 360 degrees on both the X and Y axes.

/* Animation Keyframes */
@keyframes rotate-cube {
  from {
    transform: rotateY(0deg) rotateX(0deg);
  }
  to {
    transform: rotateY(360deg) rotateX(360deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

This animation is applied to the .cube element in the CSS above, telling it to run for 12 seconds, loop infinitely, and maintain a constant speed (linear).

Conclusion

There you have it—a professional-looking 3D rotating cube featuring iconic web technology logos, built with nothing but HTML and CSS. You’ve now seen how to use 3D transforms, perspective, and keyframe animations to bring a simple structure to life.

Feel free to swap out the image URLs with your own logos or images to personalize it. This project serves as a fantastic portfolio piece and a great exercise in mastering modern CSS.

Top comments (0)