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

.contentsCSSで隠したいtransform: rotateY(90deg);。ただし、上記のコードは正しく機能しません。CSSを削除するperspectiveと、正しく機能します。しかし、CSSが必要perspectiveです。

CSSを.contents設定した場合、軸Yで真の90度に正常に回転するにはどうすればよいですか？perspective.container

ありがとうございました。

4

1 に答える 1

2

どうやら視点の原点が間違っているようです (つまり、 に関して軸がずれていますrotateY())。追加-webkit-perspective-origin-x: 150pxはトリックを行うようです:更新された fiddle。

于 2012-08-21T20:04:33.307 に答える