CODEWITHSUNDEEP
htmlcssperspective
Starter
Starter

Reputation: 21

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

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>

Upvotes: 2

Views: 365

Answers (1)

Authentic Science
Authentic Science

Reputation: 848

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>

Upvotes: 1

Related Questions