プログラミング処方箋.２４　HTML＆CSS『画像の動き（回転）』

今回の本題となるテーマは、『画像の表示と動き』です。

画像の動きといえば、アニメーションが思い浮かびますが、あくまでWebサイトとしての動きの範囲です。

それだけでも、けっこう動きのパターンがあります。

動き自体は単調だとしても、それがWebサイトにあれば、視覚的にも楽しいホームページになりますね。

 

平面画像だけでは伝わりきらないと思うので、実際に動いている様子をYouTube動画としてもリンクしてあります。

https://www.youtube.com/watch?v=ShGmq9PfbiU&feature=youtu.be

プログラミングとして動きを付与するのは、CSSです。

 

CSSで出来る回転動作

回転とは

動きのある楽しいWebサイト
動物は動いているものに目がいく
（らしい）

XYZ
回転の軸。
横、縦、平面

回る
右回転

逆に回る
左回転

時計っぽい
秒単位でコチコチ動く

縦回転
コインを縦に回すイメージ

表と裏で回る
縦回転の表裏追加的な話

回転軸.X.Y.Z.

回転軸として、X、Y、Z、という軸を聞いたことがあるでしょうか？
それぞれ物体の回転の仕方を示す記号でもあります。
X軸
横の線を軸とした回転です。
ジャニーズや体操選手のバク転は、X軸の回転です。

Y軸
縦に軸がある回転です。
FFの竜騎士が縦回転で回転しながらジャンプするのは、Y軸で回転しているともいえます。

Z軸
割と平面の回転です。
窓を雑巾で掃除していて、なんとなく円運動でかけていると、それはZ軸の回転です。

最初の水車も、これはZ軸の回転になっています。
プログラミングなので、回転は基本的に同じ軌道ではあります。

右回転の水車

プログラミングで回転を加えると、たいてい最初は右回転からになります。
HTMLに関しては、CSSとの連結が主な役割になります。

animation（アニメーション）としてのCSSは、テレビアニメのような動きというよりも、プログラミングにおいては単純動作の繰り返しという意味合いが、ありますね。
@keyframes（@キーフレーム）。
これはanimationと名前を同じにする部品です。

CSSで動きを加えようと思ったら、このanimationと、@keyframesの名前を同じにすることが、最初の肝になりそうです。