Question

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

我想通过CSS .contents隐藏transform: rotateY(90deg);。但上面的代码不能正常工作。如果我删除了CSS perspective，它就能正常运行。但我需要CSS perspective。

当我在.contents中设置CSS perspective时，如何在轴Y中成功将.container旋转到90度？

谢谢。

Answer 1

显然你的视角来源是错误的（即它与你的rotateY()有关。添加-webkit-perspective-origin-x: 150px似乎可以解决问题：updated fiddle。

为什么我不能通过CSS隐藏div“-webkit-transform：rotateY（90deg）;”？

1 个答案: