読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

CSS3を使って画像を回転させてみる

はてな
スポンサーリンク

最近ちょっとだけ受けた「画像」を回転させる方法です。

CSS3で画像を回転させる

画像をくるくる回転させるだけのCSSですが、ディスクの肥やしににでもなればということで公開しておきます。

作成するCSS

作成するCSSは簡単で以下のものをコピーして下さい。

<style type="text/css">
.img_spin {
width: 50px;
height: 50px;
background-color:rgba(0,0,0,0); /*画像の背景を透明にする*/
zoom: 3.0;
    -webkit-animation: rotation 1.5s linear infinite;
    -moz-animation: rotation 1.5s linear infinite;
    -ms-animation: rotation 1.5s linear infinite;
    -o-animation: rotation 1.5s linear infinite;
    animation: rotation 1.5s linear infinite;
}
@-webkit-keyframes rotation {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotation {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes rotation {
    0% {-ms-transform: rotate(0deg);}
    100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes rotation {
    0% {-o-transform: rotate(0deg);}
    100% {-o-transform: rotate(360deg);}
}
@keyframes rotation {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
</style>

画像のサイズを「width: 50px;height: 50px;」で指定していますが、ここらへんはご自由に。

コピーしたCSSを貼りつける

あとはコピーしたCSSを「はてなブログ」の「デザインCSS」に貼りつければ完成です。

注意事項としては、わたしはこのCSSを記事の中に直接書いて回転させているので

<style type="text/css">
    ・
    ・
    ・
</style>

で囲んでますが「デザインCSS」に貼りつける場合は不要のはずです。

回転させる画像にCSSを適用する

記事の中で回転させたい画像に上記のCSSを適用します。

<img src="回転させる画像のURL" class="img_spin"></img>

するとこんな感じに回転するはずです。




逆回転もできます。

画像を逆回転することもできます。

CSSの中に4つある

    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}

の回転する値(0degと360deg)を入れ替えます。

    0% {transform: rotate(360deg);}
    100% {transform: rotate(0deg);}

すると逆回転するはずです。






どうです?
逆回転もできましたか?

まとめ

使いどころは不明ですが、なんか回してみたい人はどうぞ。

スラスラわかるCSSデザインのきほん スラスラわかるきほんシリーズ

スラスラわかるCSSデザインのきほん スラスラわかるきほんシリーズ