为什么我不能通过 CSS “-webkit-transform: rotateY(90deg);”隐藏一个 div？答案

【问题标题】：Why can't I hide a div by CSS "-webkit-transform: rotateY(90deg);"?为什么我不能通过 CSS “-webkit-transform: rotateY(90deg);”隐藏一个 div？
【发布时间】：2012-08-17 05:12:53
【问题描述】：

<!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 transform: rotateY(90deg); 隐藏 .contents。但是上面的代码不能正常工作。如果我删除 CSS perspective，它可以正常工作。但我需要 CSS perspective。

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

谢谢。

【问题讨论】：

标签： css transform perspective css-transforms

【解决方案1】：

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

【讨论】：

顺便说一句，这样做的原因是它将透视“相机”移动到 div 的中间 (300px/2)，如果没有指定变换原点，这是变换的默认旋转点。