【CSS】CSSのanimationを使って色々な回転をさせてみよう

CSSのアニメーションは色んな事ができますね。
今回はanimationを使って色々な回転設定をしてみたいと思います。

表示のイメージ動画

360度、縦、横、斜め、奥行を使った3D回転とCSSだけで色々な回転の設定をする事ができます。

ベースのコーディング

HTMLコード

ベースになるHTMLを組みます。
今回は動画を元に6つの回転を設定しますので、それぞれにclassを設定したdivを6つ用意します。

CSSコード

6つの共通部分を設定します。

大事なのは「animation」です。
スピード(2s)、定速回転(linear)、回転のリピート(infinite)を設定します。

回転CSSの種類

それぞれの回転設定は以下の通りになっています。

※動画左から

360°回転のCSS

円を描く様に360°回転します。

逆回転

360degを-360degに変更すると逆回転になります。

縦回転CSS

X軸を設定して縦に回転します。

横回転CSS

Y軸を設定して横に回転します。

斜め回転(左上軸)

左上を軸として斜めに回転します。

斜め回転(右上軸)

右上を軸として斜めに回転します。

3D回転

縦、横、奥行を使った回転。

まとめ

CSSアニメーション色々できて面白いです!
回転以外にもやってみたいと思います。

CSSコーディングのオススメ本

CSS辞典 第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。

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

予測しやすい、保守しやすい、最利用しやすい、拡張しやすい―コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!

初心者からちゃんとしたプロになる HTML+CSS標準入門

HTML&CSSの使い方が全部わかる。プロを目指すなら、最初に選ぶ本!