css - 旋转一个盒子后，盒子就不同了。（css变换preserve-3d旋转）

Question

我正在尝试像老虎机一样旋转带有文本的框。我使用纯CSS。我认为它到目前为止有效，但我确实有一个问题，旋转后旋转的盒子变小了。这是我的代码： jsfiddle

主要代码在这里完成：

#category_wrapper.show-unten{
  -webkit-transform: translateZ(-5px) rotateX(90deg);
  -moz-transform: translateZ(-75px) rotateX(90deg);
  -ms-transform: translateZ(-75px) rotateX(90deg);
  -o-transform: translateZ(-75px) rotateX(90deg);
  transform: translateZ(-75px) rotateX(90deg);

}

这是一个错误还是我有什么问题？

Answer 1

只使用这个：

#category_wrapper.show-unten{
-webkit-transform: translateZ(-5px) rotateX(90deg);
-moz-transform: translateZ(-75px) rotateX(90deg);
-ms-transform: translateZ(-75px) rotateX(90deg);
-o-transform: translateZ(-75px) rotateX(90deg);
transform: translateZ(0px) rotateX(90deg);

}

最后一行的变化见==> transform: translateZ(0px) rotateX(90deg);

并使用这个：

transform: rotateX(-100deg) translateZ(75px); //instead of -90 deg in class .unten

我更新了你的 jsfiddle => Jsfiddle