画像を回転させようと思って、jQueryのプラグインを探してみたらあったのでやってみました。
jqueryrotate - jQuery plugin that rotate images (and animate them) by any angle - Google Project Hosting
特に解説の必要はないのですが、border-radius: 50%とCSS3で指定すると、円形に画像を切り抜けるので、回転しているのが良い感じになります。
また、このプラグインは、画像だけでなく、普通にHTMLの要素も回転させることができますので、工夫次第では面白いかもしれませんね。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="urf-8"> <title>jQuery Rotate</title> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://jqueryrotate.googlecode.com/files/jQueryRotateCompressed.2.2.js"></script> <style> #sample { margin: 50px; border-radius: 50%; </style> </head> <body> <img id="sample" src="sample.jpg" /> <script> $(function() { var angle = 0; function rotate() { $('#sample').rotate(angle); } setInterval(function() { angle += 3; rotate(); }, 10); }); </script> </body> </html>
- 作者: 高橋のり,西畑一馬,狭間句美
- 出版社/メーカー: マイナビ
- 発売日: 2012/12/22
- メディア: 単行本(ソフトカバー)
- クリック: 2回
- この商品を含むブログ (2件) を見る