3

正方形の画像を「横向きの台形」に変換するアニメーションを作成しようとしています。このように: http://i.stack.imgur.com/QRtgz.png (0 と 1 は無視してください)

シンプルで軽量な jQuery プラグインを必死に探していますが、あまり出てきません。できるだけ多くのブラウザーと互換性を持たせるために jquery に固執したいと思いますが、CSS の代替手段を受け入れますか?

前もって感謝します

4

2 に答える 2

0

これがあなたが要求していることだと思います: 左上隅を押し戻すと、右下隅が近くなります。

<div class="perspective"><div class="square">the square</div></div>

.perspective{
    -webkit-perspective : 800px
}
.square{
    margin: 20px;
    -webkit-transform-origin: center center;
    -webkit-transition: all 1s ease;
    width:100px;
    height:100px;
    background:#AAA;
}
.square:hover{
    -webkit-transform: rotateX(-5deg) rotateZ(5deg) rotateY(-5deg);
}

例 (div にカーソルを合わせる):

http://jsfiddle.net/ewGWj/17/

誇張された例:

http://jsfiddle.net/ewGWj/18/

于 2013-08-05T14:09:55.283 に答える