Create a Mesmerizing 3D Rotating Cube with HTML and CSS

Introduction

In this lab, we will create a 3D rotating cube using HTML and CSS. This cube will have colorful faces and will rotate infinitely, creating a visually appealing effect. We'll guide you through each step of the process to help you build this project from scratch.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css(("`CSS`")) -.-> css/CSSPreprocessorsGroup(["`CSS Preprocessors`"]) css(("`CSS`")) -.-> css/CodingStandardsandBestPracticesGroup(["`Coding Standards and Best Practices`"]) html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/BasicStylingGroup -.-> css/fonts("`Fonts`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/CoreLayoutGroup -.-> css/positioning("`Positioning`") css/AdvancedLayoutGroup -.-> css/flexbox("`Flexbox`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/DynamicStylingGroup -.-> css/animations("`Animations`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") css/CSSPreprocessorsGroup -.-> css/mixins("`Mixins`") css/CodingStandardsandBestPracticesGroup -.-> css/comments("`Comments`") html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/BasicStructureGroup -.-> html/viewport("`Viewport Declaration`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") subgraph Lab Skills css/selectors -.-> lab-165641{{"`3D Rotating Cube`"}} css/colors -.-> lab-165641{{"`3D Rotating Cube`"}} css/fonts -.-> lab-165641{{"`3D Rotating Cube`"}} css/margin_and_padding -.-> lab-165641{{"`3D Rotating Cube`"}} css/borders -.-> lab-165641{{"`3D Rotating Cube`"}} css/width_and_height -.-> lab-165641{{"`3D Rotating Cube`"}} css/display_property -.-> lab-165641{{"`3D Rotating Cube`"}} css/positioning -.-> lab-165641{{"`3D Rotating Cube`"}} css/flexbox -.-> lab-165641{{"`3D Rotating Cube`"}} css/backgrounds -.-> lab-165641{{"`3D Rotating Cube`"}} css/animations -.-> lab-165641{{"`3D Rotating Cube`"}} css/transformations -.-> lab-165641{{"`3D Rotating Cube`"}} css/mixins -.-> lab-165641{{"`3D Rotating Cube`"}} css/comments -.-> lab-165641{{"`3D Rotating Cube`"}} html/basic_elems -.-> lab-165641{{"`3D Rotating Cube`"}} html/charset -.-> lab-165641{{"`3D Rotating Cube`"}} html/lang_decl -.-> lab-165641{{"`3D Rotating Cube`"}} html/viewport -.-> lab-165641{{"`3D Rotating Cube`"}} html/head_elems -.-> lab-165641{{"`3D Rotating Cube`"}} html/doc_flow -.-> lab-165641{{"`3D Rotating Cube`"}} end

Write the HTML Structure

You can see the following files from your editor.

├── index.html
└── style.css

Now, let's create the HTML structure for our cube. Open the index.html file in your text editor and add the following HTML code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Rotating Cube</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="cube">
      <div class="face front">Front</div>
      <div class="face back">Back</div>
      <div class="face right">Right</div>
      <div class="face left">Left</div>
      <div class="face top">Top</div>
      <div class="face bottom">Bottom</div>
    </div>
  </body>
</html>

This code sets up the HTML document structure with a cube container and six faces, each labeled with a different side.

Create the Basic CSS Styles

Now, let's add the basic CSS styles to position and style the cube. Open the style.css file and add the following CSS code:

/* style.css */

/* Cube container styles */
.cube {
  width: 200px;
  height: 200px;
  margin: 100px auto;
  position: relative;
  transform-style: preserve-3d;
}

In this step, we've defined the basic dimensions and positioning for the cube container.

Style Individual Faces

To make each face of the cube distinct and give it a 3D appearance, we'll style them individually. Add the following code to your style.css file:

/* Individual face styles */
.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid #c3bfbf;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

This CSS code defines the common styles for all faces of the cube.

Style Front and Back Faces

Let's style the front and back faces of the cube to give them background colors. Add the following code to your style.css file:

/* Front face */
.front {
  background-color: #fbf0b2;
  transform: rotateY(0deg) translateZ(100px);
}

/* Back face */
.back {
  background-color: #ffc7ea;
  transform: rotateY(180deg) translateZ(100px);
}

In this step, we've defined the background colors and initial 3D positions for the front and back faces.

Style Right and Left Faces

Now, let's style the right and left faces of the cube. Add the following code to your style.css file:

/* Right face */
.right {
  background-color: #d8b4f8;
  transform: rotateY(90deg) translateZ(100px);
}

/* Left face */
.left {
  background-color: #caedff;
  transform: rotateY(-90deg) translateZ(100px);
}

These styles give distinct colors and positions to the right and left faces.

Style Top and Bottom Faces

Lastly, let's style the top and bottom faces of the cube. Add the following code to your style.css file:

/* Top face */
.top {
  transform: rotateX(90deg) translateZ(100px);
}

/* Bottom face */
.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

These styles set the top and bottom faces in their initial positions.

Add Cube Rotation Animation

To make the cube rotate infinitely, let's add a rotation animation. Add the following code to your style.css file:

/* Keyframe animation for rotation */
@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(90deg);
  }

  100% {
    transform: rotateX(180deg);
  }
}

/* Apply the rotation animation to the cube */
.cube {
  animation: rotate 5s infinite linear;
}

This code defines a keyframe animation called "rotate" and applies it to the cube container, making it rotate continuously.

Now that you've set up the HTML and CSS, it's time to see the rotating cube in action. Open the index.html file in your web browser, and you should now have a 3D cube with colorful faces that rotates indefinitely.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You've successfully created a 3D rotating cube using HTML and CSS. This step-by-step tutorial guided you through setting up the project, creating the HTML structure, applying CSS styles for 3D transformations, and adding animations. If you're interested in enhancing your cube with interactivity, you can explore adding JavaScript as an optional step. Have fun experimenting and customizing your 3D cube project!

3D Rotating Cube