旋转长方体后，长方体会有所不同.(css transform preserve-3d rotate)

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

这是bug还是我出了什么问题？

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

最后一行的更改请参见===>变换：translateZ（0px）rotateX（90deg）；

并使用这个：

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

我更新了你的jsfiddle=>Jsfidle