如何在保持尺寸正常的情况下放大3D旋转立方体？

Question

我有一个只有 CSS 的立方体，宽度为 200，高度为 200，但每当我尝试调整它时，它开始看起来很古怪

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) }
}

通常，它看起来像这样：

在我尝试调整尺寸后，它看起来像这样： &

我曾尝试搜索现实生活中使用的立方体尺寸，但无济于事。我也尝试使用 here 的答案，但立方体似乎仍然有问题。