Build a Stunning 3D Cube: CSS Animations & Tricks

In modern web design, adding visually appealing and interactive elements is key to creating a memorable user experience. One effective way to enhance your website’s visual appeal is by integrating 3D effects using HTML and CSS. These technologies provide the ability to build dynamic, engaging content without relying on complex scripting languages like JavaScript.

This article will guide you through the process of building a 3D cube using only HTML and CSS. You will learn how to structure the necessary HTML elements to represent the six faces of the cube, as well as how to apply CSS transformations and animations to bring it to life. By the end of this tutorial, you'll be able to create a rotating 3D cube on your website, adding interactive and visually striking elements with just a few lines of code.

01. Html
02. CSS
03. Output

Read Also:

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
 <head>
   <title>Build a Stunning 3D Cube Using Html Css Only</title>
 </head>
 <body>
	// Content
 </body>
</html>

Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below.

<!DOCTYPE html>
<html>
 <head>
   <title>Build a Stunning 3D Cube Using Html Css Only</title>
 </head>
 <body>
<div class="cube-container">
  <div class="cube">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
    <div class="face left">Left</div>
    <div class="face right">Right</div>
    <div class="face top">Top</div>
    <div class="face bottom">Bottom</div>
  </div>
</div>
</body>
</html>

<div class="cube-container">: This div serves as the outer container for the 3D cube. It will often be used to hold and potentially animate the cube.
<div class="cube">: This div represents the cube itself. It holds all six faces and can be manipulated to create a rotating or interactive 3D cube.
<div class="face front">, <div class="face back">, <div class="face left">, <div class="face right">, <div class="face top">, <div class="face bottom">: These are the individual faces of the cube. Each one is a div with the face class, which defines common properties for all faces. The additional classes (front, back, left, etc.) distinguish each face and allow for different positioning or styling for each side of the cube.

Read Also:

CSS:

This CSS code styles and animates a 3D cube, which was set up using the HTML structure you provided earlier. Let's go through the key sections:

.cube-container

.cube-container {
  width: 100px;
  height: 100px;
  margin: 1em auto;
  perspective: 1000px;
}

width and height: This defines the dimensions of the container, which is set to 100px by 100px.
margin: The container is centered horizontally with 1em of space above and below it.
perspective: This property controls the depth effect for 3D elements inside the container. A larger value (like 1000px) makes the 3D effect subtler.

.cube

.cube {
  margin-top: 100px;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotateCube 5s infinite linear;
}

margin-top: Adds some spacing at the top of the cube.
width and height: Set to 100% to make the cube occupy the full size of its container (100px by 100px).
position: relative: This is required to position the cube's faces absolutely within the cube.
transform-style: preserve-3d: Ensures the cube's faces are rendered in 3D space.
animation: The rotateCube animation is applied here, rotating the cube indefinitely in a continuous loop (infinite) over 5 seconds with a smooth (linear) transition.

.face

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  font-family: "Poppins", sans-serif;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

position: absolute: Each face is positioned absolutely within the cube (.cube).
width and height: Each face is 100px by 100px.
border: A 1px solid border with a dark color (#fff) is applied around each face.
display: flex, align-items: center, justify-content: center: This centers the text inside each face both vertically and horizontally.
font-size: The text size is set to 1rem (relative to the root font size).
font-weight: Text is bold.
color: The text color is set to white.
font-family: The font used is "Poppins", with a fallback of sans-serif.
box-shadow: A subtle shadow effect gives the faces a slight elevation.

Face-specific Styles:

Each face has a unique background gradient and transform to position it in 3D space.

.front

.front {
  background: linear-gradient(135deg, #ffb3b3, #ff9999);
  transform: translateZ(50px);
}

A soft pink gradient is applied.
The face is placed 50px towards the viewer using translateZ(50px).

.back

.back {
  background: linear-gradient(135deg, #a6e1fa, #68b3e7);
  transform: rotateY(180deg) translateZ(50px);
}

A soft blue gradient is applied.
The face is rotated 180 degrees around the Y-axis and moved 50px towards the viewer.

.left

.left {
  background: linear-gradient(135deg, #c4e17f, #9ddf7c);
  transform: rotateY(-90deg) translateZ(50px);
}

A soft green gradient is applied.
The face is rotated -90 degrees around the Y-axis and moved 50px towards the viewer.

.right

.right {
  background: linear-gradient(135deg, #ffd3b5, #ffb68c);
  transform: rotateY(90deg) translateZ(50px);
}

A peachy pastel gradient is applied.
The face is rotated 90 degrees around the Y-axis and moved 50px towards the viewer.

.top

.top {
  background: linear-gradient(135deg, #e5c9f7, #c0a3d6);
  transform: rotateX(90deg) translateZ(50px);
}

A lavender gradient is applied.
The face is rotated 90 degrees around the X-axis and moved 50px towards the viewer.

.bottom

.bottom {
  background: linear-gradient(135deg, #f9d7c1, #f7c7b6);
  transform: rotateX(-90deg) translateZ(50px);
}

A light coral gradient is applied.
The face is rotated -90 degrees around the X-axis and moved 50px towards the viewer.

@keyframes rotateCube

@keyframes rotateCube {
  0% { transform: rotateX(0) rotateY(0); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

The @keyframes rule defines the rotation animation.

0%: At the start, the cube has no rotation.
100%: At the end of the animation, the cube rotates 360 degrees on both the X and Y axes, creating a continuous spinning effect.

Css Complete Code

.cube-container {
    width: 100px;
    height: 100px;
    margin: 1em auto;
    perspective: 1000px;
}

.cube {
    margin-top: 100px;
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 5s infinite linear;
}

.face {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    font-family: "Poppins", sans-serif;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.front {
    background: linear-gradient(135deg, #ffb3b3, #ff9999); /* Soft pink gradient */
    transform: translateZ(50px);
}

.back {
    background: linear-gradient(135deg, #a6e1fa, #68b3e7); /* Soft blue gradient */
    transform: rotateY(180deg) translateZ(50px);
}

.left {
    background: linear-gradient(135deg, #c4e17f, #9ddf7c); /* Soft green gradient */
    transform: rotateY(-90deg) translateZ(50px);
}

.right {
    background: linear-gradient(135deg, #ffd3b5, #ffb68c); /* Peachy pastel gradient */
    transform: rotateY(90deg) translateZ(50px);
}

.top {
    background: linear-gradient(135deg, #e5c9f7, #c0a3d6); /* Lavender gradient */
    transform: rotateX(90deg) translateZ(50px);
}

.bottom {
    background: linear-gradient(135deg, #f9d7c1, #f7c7b6); /* Light coral gradient */
    transform: rotateX(-90deg) translateZ(50px);
}

@keyframes rotateCube {
    0% { transform: rotateX(0) rotateY(0); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

Read Also:

Output:

Read Also: