@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

jQueryRotateで画像を回転させる

jQuery

画像を回転させようと思って、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>

やさしくはじめるWebデザイナーのためのjQueryの学校

やさしくはじめるWebデザイナーのためのjQueryの学校