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

Question

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

Answer 1

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

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

修改过的小提琴

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

另一个注意事项：默认值为backface-visibilityis visible，因此您可以忽略它。

Answer 2

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

我觉得您的代码在 webkit 浏览器上运行，但在 firefox 上运行，即等。

您使用了仅 webkit 浏览器支持的 CSS 属性，如透视、变换样式，您也使用了一些 CSS 属性，如变换、背面可见性，这些属性由 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);