CSS 3 rotateY() 和 rotateX() 没有按预期工作答案

【问题标题】：CSS 3 rotateY() and rotateX() not working as expectedCSS 3 rotateY() 和 rotateX() 没有按预期工作
【发布时间】：2014-12-29 15:53:33
【问题描述】：

我正在尝试 css3 中的新功能，而我发现 rotateY() 和 rotateX() 没有给出预期的结果。我在页面中有一个 div

<div id="element"></div>

这是css

#element{
    position: relative;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    top: 300px;
    background-color: yellow;
    transform: rotateY(45deg);
}

蓝色是我想要的，黄色是我得到的

【问题讨论】：

您可以提供一个视角：transform: perspective(200px) rotateY(45deg);

标签： css

【解决方案1】：

您需要添加一个容器并给它perspevtive: 500px 以获得3D 外观效果。

#container {
  -webkit-perspective: 500px;
  perspective: 500px;
}
#element {
  position: relative;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  top: 10px;
  background-color: yellow;
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
}

<div id="container">
  <div id="element"></div>
</div>

【讨论】：

【解决方案2】：

您可能想要完成您的transform 和perspective 样式规则：

jsfiddle demo

body{
    -webkit-perspective:200px;
    -moz-perspective:200px;
    perspective:200px;
    -webkit-perspective-origin:center 400px /* 300px + 200px/2 */;
    -moz-perspective-origin:center 400px /* 300px + 200px/2 */;
    perspective-origin:center 400px /* 300px + 200px/2 */;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    transform-style:preserve-3d;
}
#element{
    position: relative;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    top: 300px;
    background-color: yellow;
    -webkit-transform: rotateY(45deg);
    -moz-transform: rotateY(45deg);
    transform: rotateY(45deg);
    -webkit-transform-origin:center;
    -moz-transform-origin:center;
    transform-origin:center;
}

&lt;div id="element"&gt;&lt;/div&gt;

#element 的父级（不需要<body>）必须有：

perspective 这样你的浏览器就知道视口离#element 有多“远”，并相应地渲染旋转效果；
perspective-origin 这样你的浏览器就知道你的视口的“中心”在哪里；

transform-style:preserve-3d 在这种特定情况下似乎不是必需的，IE doesn't support this feature yet。我只是出于习惯添加了它。

【讨论】：

真的吗？将perspective 提供给body 是一个可怕的想法。
@chipChocolate.py 我想我已经指出需要perspective的是#element的父级，我强调它没有必要<body>。