creatersnest144

CSS3でアニメーション!画像を回転させる方法


ローディング中の画像などに、
以前はアニメーションgifを用いていましたが、
最近はcssのanimationプロパティで実装する方が、
細かな速さを調整でき、
動きもスムーズで簡単に実装できるので
利用されている方も多いのではないでしょうか?

 

今回はcssのrotateを使って画像を回転させる方法をまとめます。

 

rotateの種類について

transformプロパティのrotateには以下の種類があります。
サンプル
rotate(回転角度)
角度によって2D回転を指定します。
マイナス値の設定もすることができます。
rotateX(回転角度)
X軸を軸とする角度によって時計回りの回転を指定します。

 

rotateY(回転角度)
Y軸を軸とする角度によって時計回りの回転を指定します。

 

rotateZ(回転角度)
Z軸を軸とする角度によって時計回りの回転を指定します。

 

rotate3d(数値, 数値, 数値, 回転角度)
最初の3つの数値で(x,y,z)の方向ベクトルを決め、
最後に指定する回転角度で時計回りの3D回転を指定します。

 

animationプロパティを用いて画像を回転

サンプル2
まずはhtml側の記載からサンプルを表示します。

今回は「sample」という文字の入ったdiv要素を
アニメーションを使って回転させます。

 

次はcssの表示です。
画像の回転は「transition」でも実装可能ですが、
「animation」の方がより細かい動きを設定することができます。

 

まとめ

如何だったでしょうか。
以前はデザイナーを巻き込んでgifアニメーション画像を作成しないと
動きのあるサイトの構築は難しかったと思います。
最近ではコーダーのみで様々なアニメーションを
たった数行で実装することができるようになりました。
:hoverなどと組み合わせるとより動きのある
面白いサイトになること間違いなしです!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticleWebデザイン初心者のための、コーディング規約ってなに!?