Почему я не могу скрыть div с помощью 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

Я хочу скрыть .contents с помощью CSS transform: rotateY(90deg);. Но коды выше не работают должным образом. Если я удаляю CSS perspective, он работает правильно. Но мне нужен CSS perspective.

Как я могу успешно повернуть .contents на истинные 90 градусов по оси Y, если я также установил CSS perspective в .container?

Спасибо.

1 2
css css3 perspective css-transforms

1 ответ:

По-видимому, ваше происхождение перспективы неверно (то есть оно смещено относительно вашей rotateY()). Добавление -webkit-perspective-origin-x: 150px, кажется, делает трюк: обновленная скрипка .

2