【CSS】CSS3で要素を回転させる方法

GIF画像で回転させるアニメーションを作ってませんか?

もうそれは遅いです。

だって今はCSS3があるんだから。

回転の仕方

少しわかりにくいかもしれませんがこのCSSコードとHTMLコードに少し手を入れるだけで簡単に実装することが出来ます。

CSS

.spin {
    animation: 1s linear infinite spin;
}

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

そしてHTMLの方は

HTML

<div class="spin">

このようにクラスに「spin」プロパティをいれればいいだけです

これを要素に入れればいいだけなので簡単ですね!

確認デモ

URL: https://demo.akihiro-nagai.jp/rotation/

(このデモはclass部分を「a」や「y」などにして使用しています)

画像などもちゃんと動いてくれます。

CSS

.spin {
    width: 50px;
    height: 50px;
    background: #333;
    animation: 1s linear infinite spin;
}

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

また、回転速度を変えたい場合は「animation: 1s linear infinite spin;」の「1s」を好きに変えてください。

CSS

.spin {
    animation: 3s linear infinite spin;
}

(この場合1回転に3秒かかります。)

【豆知識】動き方を変えたい時

まあ、これは少し記事からそれますが、なんかリズムが違う風にやるときのも載せておきます

CSS

.spin {
    animation: 1s ease infinite spin;
}

どうでしたか?要素の回転の仕方。

結構簡単でしょ?

このこれを使えばいろいろな要素を回転出来るので是非覚えていてくださいね!