为什么底部和顶部文本不在3D长方体中居中

问题描述

这是一个制作长方体，为其着色的代码，并应将每一侧的文本居中放置在每一侧的中心，但是它似乎不包括顶侧和底侧-文本一直压缩到边缘。为什么会这样，如何解决？我不确定我在哪里犯了错。

.scene {
  width:300px;
  height:200px;
  perspective:500px;
}
.Box {
  width:300px;
  height:200px;
  position:relative;
  transform-style:preserve-3d;
  transform: translateZ(-50px);
  text-align:center;
  line-height:200px;
  font-size:2.5em;
  color:white;
  font-weight:bold;
  animation: spin 6s;
}
.Box-face {
  position:absolute;
}
.front,.back {
  width: 300px;
  height:200px;
}
.right,.left {
  width:100px;
  height:200px;
  left:100px;
}
.top,.bottom {
  width:300px;
  height:100px;
  top:50px;
}
.front {
  background-color: rgba(255,0.7);
  transform:rotateY(0deg) translateZ(50px);
}
.right {
  background-color:rgba(255,255,0.7);
  transform: rotateY(90deg) translateZ(150px);
}
.back {
  background-color:rgba(0,0.7);
  transform: rotateY(180deg) translateZ(50px);
}
.left {
  background-color: rgba(0,0.7);
  transform: rotateY(-90deg) translateZ(150px);
}
.top {
  background-color:rgba(0,0.7);
  transform: rotateX(90deg) translateZ(100px);
}
.bottom {
  background-color:rgba(255,0.7);
  transform: rotateX(-90deg) translateZ(100px)
}

<div class="scene">
<div class="Box">
<div class ="Box-face front">front</div>
<div class="Box-face back">back</div>
<div class="Box-face right">right</div>
<div class="Box-face left">left</div>
<div class="Box-face top">top</div>
<div class="Box-face bottom">bottom</div>
</div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）