0

質問はタイトルにあります：

HTML：

<div class="out">
    <div class="in anim-photo zoom">
    </div>
</div>​

CSS：

.in {
    background: #d00;
    width: 100px; height: 100px;
    margin: 50px auto;            
}

.out {
    border: solid 1px #e4e4e4;
    width: 200px; height: 200px; 
}

.anim-photo,
.transition {

       -moz-transition: all 1s ease 0s; /* Firefox 4-15 */
         -o-transition: all 1s ease 0s;  /* Opera 10.5–12.00 */
            transition: all 1s ease 0s, top 0, left 0;  /* Firefox 16+, Opera 12.50+ */

            -webkit-transition: all 1s ease 0s;
            -webkit-transform-style: preserve-3d;
            -webkit-perspective: 500;            

}

.zoom {
    -webkit-transform: scale(1.6) rotateY(120deg);  /* Safari 3.1+, Chrome */    
}

これは私のコードです：http：//jsfiddle.net/jBmeQ/2/

下の写真は私の問題を示しています。

ここに画像の説明を入力してください

右側には、視点があります。

私は何を間違えましたか？

4

1 に答える 1

2

-webkit-perspective3Dである必要がある要素を含むコンテナ上にある必要があります。また、-webkit-transform-style: preserve-3d;元のコンテナの子（この場合は赤い四角の子ビュー）に子要素を追加する場合にのみ必要です。

http://jsfiddle.net/jBmeQ/3/

于 2012-12-11T13:45:24.960 に答える