How to enlarge 3D rotating cube while keeping the dimensions normal?

Question

I have a CSS only cube with 200 width 200 height but whenever I attempt to adjust it starts to look wacky

body {
  margin: 0;
  width: 100%;
  /*border: 1px solid orange;*/
}

.wrap {
  margin: 0 100px;
  perspective: 800px;
  perspective-origin: 50% 100px;
  /*border: 1px solid red;*/
  width: 100%;
  height: 300px;
  margin: 0;
  margin-top: 50px;
}

.cube {
  position: center;
  margin: 5 auto;
  width: 500px;
  transform-style: preserve-3d;
  animation: spin 20s infinite linear;
  /*border: 1px solid blue;*/
}

.cube div {
  position: absolute;
  width:200px;
  height: 200px;
  background-color: rgba(54,39,39,0.53);
  /*border: 1px solid green;*/
  box-shadow: inset 4px 4px 30px rgba(0,0,0,0.25);
  text-align: center;
  font-family: sans-serif;
  line-height: 200px;
  transition: background-color 3s ease;
}

.cube div:hover {
  background-color: rgba(239,179,210,.45);
}

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

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

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

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

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

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

@keyframes spin {
  from { transform: rotateY(0) }
  to { transform: rotateY(360deg) }
}

Normally, it'd look like this: A somewhat transparent cube

After I try to tweak with the dimensions it looks like this: Funny looking cube & Side View

I've attempted to search up cube dimensions used in real life with no avail. I also attempted to use the answer from here but the cube still seems to be faultful.

Answer 1

First create a scene and insert a cube inside of it, for cube first create 6 elements for 6 faces and add the colour to differentiate it.Now comes the real part with the help of transform property, position the each face accordingly to form the cube.

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 400px;
}

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-200px) rotateY(0deg);
  transition: transform 1s;
}

.cube__face {
  position: absolute;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items:center;
  font-size: 30px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.cube__face--front  { background: rgba(  0,0,0, 0.1); }
.cube__face--right  { background: rgba( 60, 100, 23, 0.7); }
.cube__face--back   { background: rgba(110, 100, 50, 0.7); }
.cube__face--left   { background: rgba(0, 90, 80, 0.7); }
.cube__face--top    { background: rgba(130, 80, 120, 0.7); }
.cube__face--bottom { background: rgba(140, 70, 520, 0.7); }

.cube__face--front  { transform: rotateY(  0deg) translateZ(100px); }
.cube__face--right  { transform: rotateY( 90deg) translateZ(100px); }
.cube__face--back   { transform: rotateY(180deg) translateZ(100px); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(100px); }
.cube__face--top    { transform: rotateX( 90deg) translateZ(100px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); }

<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face--front">1</div>
    <div class="cube__face cube__face--back">2</div>
    <div class="cube__face cube__face--right">3</div>
    <div class="cube__face cube__face--left">4</div>
    <div class="cube__face cube__face--top">5</div>
    <div class="cube__face cube__face--bottom">6</div>
  </div>
</div>

• language: lang-html -->

  1 2 3 4 5 6