css 3d形状在旋转时变得倾斜

Question

我有一个 css 中的 3d 框，当我旋转它时它看起来很奇怪。这是一个jsfiddle：http://jsfiddle.net/markasoftware/GKPZ9/ 你可以看到它在旋转时看起来多么奇怪和不像盒子。为什么会这样？

Answer 1

如果我的问题是正确的，并且当盒子旋转时，侧面看起来是梯形而不是矩形，那么......

这是因为您在旋转的盒子上使用了perspective。在其父级（在本例中为主体）上使用 perspective 应该可以解决问题。在这种情况下，您可能还想设置perspective-origin。

modified fiddle

另外，请注意，您应该始终将无前缀版本放在最后。

另外注意：backface-visibility 的默认值是visible，所以你可以忽略它。

Answer 2

您使用哪个浏览器来测试输出？

我觉得你的代码可以在 webkit 浏览器上运行，但不能在 Firefox 等浏览器上运行。

您使用了仅 webkit 浏览器支持的 CSS 属性，如透视、变换样式 您还使用了一些 css 属性，例如 transform、backface-visibility，这些属性受 webkit 类型以外的浏览器支持，但您没有以其他浏览器可以理解的方式指定属性。 例如你刚刚指定

transform: rotateX(-20deg);
-webkit-transform: rotateX(-20deg);

你应该在哪里指定

 -moz-transform: rotateX(-20deg); 
  -ms-transform: rotateX(-20deg); 
   -o-transform: rotateX(-20deg); 
      transform: rotateX(-20deg);
         -webkit-transform: rotateX(-20deg);