旋转一个盒子后盒子就不同了。 （css变换保存-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);

}

最后一行的更改请参阅==＆gt; transform：translateZ（0px）rotateX（90deg）;

并使用此：

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

我更新了你的jsfiddle =＆gt; Jsfiddle