旋转长方体后，长方体不同。（css变换保留-3d旋转）

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

主要代码在这里完成：

#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还是我做错了什么？

仅使用以下选项：

#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: rotateX(-100deg) translateZ(75px); //instead of -90 deg in class .unten

最后一行的变化见==>变换：translateZ（0px）rotateX（90度）

并使用以下命令：

#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: rotateX(-100deg) translateZ(75px); //instead of -90 deg in class .unten

---

我更新了你的JSFIDLE=>

它们在我看来是一样的。211x106英寸镀铬检验员。另外，在您的

-webkit transform

中，

translateZ

是

-5px

，而不是

-75px

。更新了，但在firefox中，它仍然很小，只是为了获取信息，我的答案是firefox为所有浏览器提供的