中心を軸にくるくる回るjQuery or CSSスクリプト

jQueryのスクリプトを探しています。
要件は以下のとおりです。
・中心を軸に、くるっと回る（うちわを回すような感じです）
・自動でも、手動（クリック）でも回せる
・回転する度に複数の画像が切り替わる
・多くのブラウザ（できるだけIEの古いバージョンにも対応）で動作する
クリックすれば動くものはあるのですが、自動でカルーセルのようなアニメーションをしてくれるものが見つかりません。
既存のものをこう改造すれば自動で動きますという情報でも歓迎です。

以下、探したものです。
http://lab.smashup.it/flip/
ちょっと動きが硬い？＆自動で動かしたい

http://maccman.github.io/gfx/
Flipを自動で動かしたい＆画像にしたい

http://pazguille.github.io/flipload/
自動で動かしたい

http://philparsons.co.uk/demos/box-slider/
（Horizontal3Dで、ボックスではなく2枚の画像が裏表にある感じにしたい）

どうぞよろしくお願いします。

No.1 回答者： fujillin 回答日時： 2015/04/21 18:20

こんにちは。

情報にもなっていないかもしれませんが・・・


立体的に見せたいとするなら、ご提示の事例のようにCSS3でperspectiveを指定してtransformを利用したアニメーションにするのが簡単だと思いますが、最近のブラウザが対象ということになってしまいますね。
（例示の4番目がうまくできているかと…）

CSS3を利用しないで画像に奥行きを持たせる方法を、だいぶ以前に回答したことがありますが、
　https://oshiete.goo.ne.jp/qa/7608841.html
こちらもcanvasを利用していますので、似たり寄ったりでしょうか・・・


古いブラウザでも動くものとしては、例示の2番目のような平面的な回転をCSS3を用いずに行うことになるのかな・・・
（例示の2番目はCSS3を利用しているようですが…）
具体的には、
　1）画像の横幅を縮めるアニメーション
　2）幅が無くなったところで画像を入れ替え
　3）もとの横幅に戻すアニメーション
を連続して行えば、そのように見えると思います。
ただし、奥行きの表現ができないので、単に画像が縮まって広がるだけに見えてしまうかも・・・
速度を一定でなく、回転の時のように伸縮してあげれば、疑似的に回転しているように見えるかもしれませんね。


＞クリックすれば動くものはあるのですが、自動でカルーセルの
＞ようなアニメーションをしてくれるものが見つかりません。
そのままで使えるものがあるのでしたら、ロード時にスクリプトからスイッチとなっている要素をクリックしてあげるか、あるいは、クリックしたら呼び出される関数を直接呼び出すなどすることで、自動で動作するのと同様に見えると思います。
この方法であれば、既存のものをそのまま利用できますし、付け加えるのも2～3行で済むのではないでしょうか。
（元のスクリプトの仕組みにもよりますが…）

この回答へのお礼

ありがとうございました。
ちょっとブラウザの制限が出てしまいますが、
http://jquery.malsup.com/cycle2/demo/flip.php
で対応することにしました。
ありがとうございました。

お礼日時：2015/04/24 18:46