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);
}

This is the expected result

This is what i get

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

Answer 1

您需要添加一个容器并将其perspevtive: 500px赋予它以获得3D效果。

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

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

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

#element（不必<body>）的父母必须：

perspective，以便您的浏览器知道视口与#element的“距离”，并相应地渲染旋转效果;
perspective-origin所以您的浏览器知道视口的“中心”在哪里;

transform-style:preserve-3d在这种特定情况下似乎没有必要，IE doesn't support this feature yet。我刚把它添加出来了。

CSS 3 rotateY（）和rotateX（）无法按预期工作

2 个答案: