3D Cube

In this example below you will see how to do a 3D Cube with some HTML / CSS and Javascript

Just a simple example how to build a 3D Cube, I use this for CSS examples when I go teaching the transform module

Thumbnail
This awesome code was written by oieduardorabelo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright oieduardorabelo ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>3D Cube</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

    <div class="stage">
    <div class="cube n1">
      <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>
    <div class="cube n2">
      <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>
    <div class="cube n3">
      <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>
  </div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/oieduardorabelo/3d-cube-kqpGH */
  html, body {
    height: 100%;
  }

  .stage {
    position: relative;
    min-height: 100%;
    width: 100%;
    -webkit-perspective: 1200;

    display: -webkit-flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .cube {
    /*position: absolute;*/
    height: 200px;
    width: 200px;

    -webkit-transform-style: preserve-3d;
  }

  .cube.n1 {
    left: 120px;
    -webkit-transform: rotate3d(-1, 1, 1, -22deg);
  }

  .cube.n2 {
    left: 360px;
    -webkit-transform: rotate3d(-10, 5, 4, 71deg);
  }

  .cube.n3 {
    left: 600px;
    -webkit-transform: rotate3d(1, 2, 0, 180deg);
  }

  .face {
    position: absolute;
    width: inherit;
    height: inherit;
    opacity: .5;
  }

  .face.front {
    background-color: blue;
    -webkit-transform: translateZ(100px);
  }

  .face.left {
    background-color: green;
    -webkit-transform: translateX(100px) rotateY(90deg);
  }

  .face.right {
    background-color: orange;
    -webkit-transform: translateX(-100px) rotateY(-90deg);
  }

  .face.back {
    background-color: purple;
    -webkit-transform: translateZ(-100px) rotateY(180deg);
  }

Comments