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

Question

我正在尝试 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);
}

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

Answer 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>