【CSS3でおしゃれなサイトに】画像（星空）をくるくる回す(キーフレーム・transform:rotateなど)
更新： 2021/02/16 2039文字
今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。
絵はイラストacさんからお借りしました。CSS3では、カンタンなアニメーションを実装できるので、サイトに動きを出すことができます。ここでは『ＣＳＳでくるくる回す』というのをやってみたいと思います。
目次
ＣＳＳでくるくる回すとき、参考になったサイト
とりあえず、（動画ではガンガンやってるくせに笑）ＣＳＳで要素をくるくるまわしたことは無かったので、検索しまくって、以下のサイトを見つけました。
- transform_rotate(CSS3リファレンスさん)
- CSS3要素をクルクル回転させる（ONZEさん）
- 基礎から学ぶCSS3で作るギミック、アニメーション transform transition animation編（mao-engineerさん）
これらのサイトを参考に、コードを書いてみました。
CSSで星空の画像をくるくるまわしてみる
実装例
とりあえず、ＣＳＳ部分は直しちゃったので、このサイトにつけたときのスクリーンショットをとっておきました（ＭＰ４です）。星空の画像をここのdiv内において、くるくる回す感じです。これはすべて画像ファイルとＣＳＳでできています。
くるくる回すときの、ＣＳＳのコード
■CSS
.rotate{
width: 480px;
height: 480px;
margin:0 auto;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
background-image:url("/music-creation/wp-content/uploads/20171107zimage4144.png");
background-size: cover;
animation-name: twinkle;
animation-duration:60s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes twinkle {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
■HTML
<div class="rotate">
</div>
ちょっとクラス名とプロパティ名がカブってややこしいんですけど（rotateとか）、こんな感じでやってみました。width＆heightでサイズ・margin:0 autoで真ん中配置・filter:alphaで透過して薄く・background-imageが背景星空画像・background-size: coverでその要素全体に画像を広げました。
回転する部分に関するCSSについて
- animation-name（そのアニメーションの名前・星だからtwinkleに笑）
- animation-duration（長さ・60sだと６０秒で回転）
- animation-timing-function: linear（一定・ベジエ曲線みたいに変化もできるそうです）
- animation-iteration-count: infinite（数値で再生回数指定、infiniteだとずっと回る）
- keyframes twinkle（キーフレームで、さっき指定したアニメ名前を指定）
- transform: rotate（0%回転スタート）
- transform: rotate(100%で、360度回転)
いっこいっこプロパティを分けると、こんな説明になるかなと。
注意点
divというふうにあってここに背景が指定してありますが、背景だからといってこのdiv内に文字を入れてしまうと、文字も一緒にくるくる回ってしまいます。なのでめちゃくちゃ読みにくくなります。
回転するのは背景だけにし、文字は動かしたくない場合は、文字はこのdivの外に置き、z-indexで回転する背景は下・文字は上のような指定が必要になります。背景がくるくる回っていて、かつ上の文字は動かないサイトでは、z-indexが指定されています。
