Search code examples
csstransformperspectivecss-transforms

Why can't I hide a div by CSS "-webkit-transform: rotateY(90deg);"?

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

I wanna hide .contents by CSS transform: rotateY(90deg);. But codes above doesn't work properly. If I remove CSS perspective, it works properly. But I need CSS perspective.

How can I successfully rotate .contents to true 90 degree in Axis Y when I also set CSS perspective in .container?

Thank you.

Solution

  • Apparently your perspective origin is wrong (i.e. it is off-axis with regard to your rotateY()). Adding -webkit-perspective-origin-x: 150px seems to do the trick: updated fiddle.