css - 为什么我不能通过 CSS "-webkit-transform: rotateY(90deg);"隐藏 div ？

标签 css transform perspective css-transforms

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

如何成功轮换 .contents当我还设置 CSS perspective 时，Y 轴为真正的 90 度在.container ？

谢谢。

最佳答案

显然你的视角原点是错误的(即它相对于你的rotateY()是离轴的)。添加 -webkit-perspective-origin-x: 150px 似乎可以解决问题:updated fiddle .

关于css - 为什么我不能通过 CSS "-webkit-transform: rotateY(90deg);"隐藏 div ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12061954/