正方形の画像を「横向きの台形」に変換するアニメーションを作成しようとしています。このように: http://i.stack.imgur.com/QRtgz.png (0 と 1 は無視してください)
シンプルで軽量な jQuery プラグインを必死に探していますが、あまり出てきません。できるだけ多くのブラウザーと互換性を持たせるために jquery に固執したいと思いますが、CSS の代替手段を受け入れますか?
前もって感謝します
正方形の画像を「横向きの台形」に変換するアニメーションを作成しようとしています。このように: http://i.stack.imgur.com/QRtgz.png (0 と 1 は無視してください)
シンプルで軽量な jQuery プラグインを必死に探していますが、あまり出てきません。できるだけ多くのブラウザーと互換性を持たせるために jquery に固執したいと思いますが、CSS の代替手段を受け入れますか?
前もって感謝します
これがあなたが要求していることだと思います: 左上隅を押し戻すと、右下隅が近くなります。
<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 にカーソルを合わせる):
誇張された例: