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浏览器支持的perspective，transform-style等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);

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

2 个答案:

modified fiddle