Im not able to create a 3d cube in css with transform method

Question

I am trying to make a 3d cube on top of a surface using CSS and HTML. There is a ball on the top of it. I tried to use transform: translateZ() method on the front , bottom , left and right div.

It did not work. Can someone tell how to fix this and why it didn't work?

This is the code:

:root {
  --boxColor: #0ff7
}

body {
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: black;
  min-height: 100vh;
  font-size: 50px;
  perspective: 10px;
  perspective-origin: 720px 80px
}

.scene {
  position: relative;
  transform-style: preserve-3d
}

.ball {
  background: lightblue;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  top: -3em;
  left: -1em;
}

.cube {
  background: var(--boxColor);
  height: 3em;
  width: 3em;
  position: absolute;
  top: -2em;
  left: -2em;
}

.floor {
  width: 28em;
  height: 0.2em;
  background: repeating-linear-gradient(to top right, red, blue);
  position: absolute;
  top: 1em;
  left: -15em;
  transform: rotateX(90deg);
}

.left,
.right,
.front,
.bottom {
  width: 100%;
  height: 100%;
  background: var(--boxColor);
  position: absolute;
}

.front {
  transform: translateZ(9em);
}

.left {
  transform: rotateY(90deg) translateZ(3em);
}

This is the html code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="scene">
    <div class="floor"> </div>
    //cube section
    <div class="cube">
      <div class='left'></div>
      <div class='right'></div>
      <div class="front"></div>
      <div class='bottom'></div>
    </div>
    //cube section
    <div class="ball"> </div>
  </div>
  </div>
</body>

</html>

It's hard to tell what you're trying to do here. What did you want this to look like? It looks like you're teaching yourself. For something like this, try building one piece at a time. Did you want the cube on the left edge? Start with the cube, instead of all of it. What do you need? You need to set the scene (either scene or container, where you set the size and perspective). Put the cube in your container to preserve 3d. Set the face attributes that apply to all faces. Instead of "left" have "face left" and set characteristics for face to all faces and left for what is specifically left. — Kat, Jan 01 '22 at 22:15
Does this answer your question? [How to create cube with only HTML and CSS?](https://stackoverflow.com/questions/36331335/how-to-create-cube-with-only-html-and-css) — dale landry, Jan 02 '22 at 00:51

Authentic Science · Answer 1 · 2022-01-02T03:37:45.040

I wasn't able to make your layout work with em for dimensions, so used pixels but you should be able to work this solution into your project. Not a ton of changes, just your use of perspective needed some adjustment, and your cube was only 4 sides.

:root {
  --boxColor: #0ff7
}

body {
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: black;
  min-height: 100vh;
  font-size: 50px;
  perspective: 10px;
  perspective-origin: 720px 80px
}

.scene {
  position: relative;
  transform-style: preserve-3d
}

.ball {
  background: lightblue;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  bottom: 200px;
  margin: 0 auto;
  justify-content: center;
  display: flex;
  align-self: center;
  
}

.floor {
  width: 28em;
  height: 0.2em;
  background: repeating-linear-gradient(to top right, red, blue);
  position: absolute;
  top: 150px;
  left: -15em;
  transform: rotateX(90deg);
}

.cube-container {
  perspective: 200px;
  perspective-origin: 50% 50%;
  transform: rotateZ(30deg);
}

.cube {
  height: 100px;
  width: 100px;
  transform-style: preserve-3d;
  animation: rotate 12s ease-in-out infinite;
  
}

.cube>div {
  position: absolute;
  height: 100%;
  width: 100%;
  background: var(--boxColor);
}

.front,
.back,
.top,
.bottom,
.left,
.right {
  border: 1px solid rgba(0, 0, 0, .3);
}

.front {
  transform: translateZ(50px);
}

.back {
  transform: translateZ(-50px) rotateY(180deg);
}

.right {
  transform: rotateY(-270deg) translateX(50px);
  transform-origin: top right;
}

.left {
  transform: rotateY(270deg) translateX(-50px);
  transform-origin: center left;
}

.top {
  transform: rotateX(-270deg) translateY(-50px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(270deg) translateY(50px);
  transform-origin: bottom center;
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(360deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="scene">
    <div class="floor"> </div>
    <div class="cube-container">
      <div class="cube">
        <div class="front">
        </div>
        <div class="back">
        </div>
        <div class="top">
        </div>
        <div class="bottom">
        </div>
        <div class="left">
        </div>
        <div class="right">
        </div>
      </div>
    </div>
    <div class="ball"> </div>
  </div>
</body>

</html>

Im not able to create a 3d cube in css with transform method

1 Answers1