2 
<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML Document</title>
<style>
    #container {
        -webkit-perspective: 300px;
        -moz-perspective: 300px;
    }
    #contents {
        width: 300px;
        height: 300px;
        background: red;
        -webkit-transform: rotateY(90deg);
        -moz-transform: rotateY(90deg);
    }
</style>
<div id="container">
    <div id="contents"></div>
</div>

http://jsfiddle.net/7Ss6m

我想.contents用 CSS隐藏transform: rotateY(90deg);。但是上面的代码不能正常工作。如果我删除 CSS perspective，它可以正常工作。但我需要 CSS perspective。

当我还设置 CSS 时，如何在 Y 轴上成功旋转.contents到真正的 90 度？perspective.container

谢谢你。

4

1 回答 1

2

显然，您的透视原点是错误的（即，它与您的 是离轴的rotateY()）。添加-webkit-perspective-origin-x: 150px似乎可以解决问题：更新 fiddle。

于 2012-08-21T20:04:33.307 回答