(cache) CSS３を使って画像を回転させてみる - 攻めは飛車角銀桂守りは金銀三枚

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

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の中に４つある

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

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

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

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

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

まとめ

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

Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

作者: 谷拓樹
出版社/メーカー: インプレス
発売日: 2014/07/24
メディア: Kindle版
この商品を含むブログ (1件) を見る

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

作者: 狩野祐東
出版社/メーカー: SBクリエイティブ
発売日: 2015/04/10
メディア: Kindle版
この商品を含むブログを見る