CSSで五角柱をアニメーションさせたくて苦労した話

CSS3でアニメーションが出来るのは知っているけれど難しそうで手を付けていませんでした。
CSS3のアニメーションの仕方や3Dの表示は検索すると沢山出てきます。そうは言ってもなんだか腰が重いです。

が、幸か不幸か…不調だったブログを改善しようと色々いじり倒していたら間違ってテンプレートをごっそりと消してしまい、急遽サイトをリニューアルすることになりました。デザインなしでの突貫の再構築!相方さんより「なんかアニメーションいれようよ」なんて発案もあり…

この際だ!やってみるか!

ということでTOPページにある五角柱が回転している看板みたいなのを作った時のお話です。

TOPの新着情報の表示方法で悩んでいたので、この際、ここをクルクルまわる回転看板にしてみようかなとなりました。イメージ的には、コレです。

回転看板
回転看板

それぞれの面に広告文やイラストがあってクルクルと廻っているやつですね!

立方体を学ぶ

基本中の基本のようなので、まずは立方体を学ぶことにしました。CSSで立方体を作る方法を掲載しているサイトは沢山あるので検索してみてください!

私はこちらのサイトが一番分かりやすかったです。

CSSのtransformを使って立方体を作る | Qaramell Blog

こんな分かりやすく書けるなんて羨ましいです。

ポイントはたった2つ

  1. 面はそれぞれ最初は同じ位置にいる
  2. 角度、距離を調整して立方体にする

今回はお知らせの表示を5件にしているので、5面が必要な「五角柱」なのですが、この立方体の技術を元に、五角柱を作ることにします。
五角柱とはいっても、上下の面がない筒のような形になります。立方体の場合はそれぞれの確度は90度ととても分かりやすいのですが、五角柱となると・・・角度って何度なの?!

五角柱を作るにあたって、横からみたときの「正五角形」の角度を調べることにしました。

五角形の5面の角度を知る

でました!算数です!苦手です!苦労していると相方さんからこんな可愛い画像が送られてきました。

to_noe2

すごい!ペイント臭する!!!!何言っているのか分からない!!!!!

しかもわりと大事そうな傾きを「15度くらい?」と言ってしまうあたり、やっつけすぎです!

つまり、こういうことらしいです。

  • 正五角形のそれぞれの角の角度は108度で同じ
  • AとBのかどっこにEに垂直な線Sを引いたら、SとAとの角度は15度くらい

実際に設置したいのは、最初に平面を出したいので、上の画像を90度右に展開させた形…Eが前面にくる形になります。つまり…

penta01

こういう形を最初は作ることになります。
そんなこんなで、この情報を元に、以下のように距離を調整することにしました。

立方体同様に、最初は、5面がそれぞれ線Aの位置にいて、そこからそれぞれの面を最適な位置へ移動させる。という方法をとります。

  1. A~E面を重ねた状態で配置
  2. A面はそのまま
  3. B面は、(180度-108度=)72度傾く
  4. C面は、(180度-36度=)144度傾く
  5. D面は、-(180度-36度=)144度傾く
  6. E面は、-(180度-108度=)72度傾く

角度のマイナスは、本来時計回りに回転する時は+値を入れるんですが、逆時計回転の時はマイナスを入れることになります。
回転方向が一緒なので、A面と上下を同じにする必要があるため、B・C面は時計回りにn度移動させ、D・E面は反時計回りにn度移動…としてあります。
(Dは時計まわりに216度、Eは時計回りに288度でもいいんですけど、数値少ない方が軽いかなぁなんていう検証なしのなんとなくのやり方です。)

はたしてこの説明で、角度納得いただけるでしょうか?!

面の移動距離を求める

これだけだと、なんだか面が交差したりしてしまうのですが、それもそのはず。立方体でもあった「A面からの移動」が必要になります。あくまでも面を中心としてただ回転させただけなので、A~E面が重なっているということは、回転する中心点も同じなわけですね。むずかしい…。この移動距離は、A~Eの面の高さ、図でいうと辺の長さを基準とするようで固定ではないです。

結局、求め方は、よく分かりませんでした…。
相方さんいわく、「多分、中心から辺の真ん中に引いた線の長さくらいじゃない?」ということなのですが、辺の長さが100の時に、86くらいらしく、それだとかなり面と面に隙間が出来てずれちゃったのでちょっとずつ調整してみました。

つまり、もう

なんとなくの見た目判断の数字関係なし

です。

結果、69 or 70でそれなりにあってるかなぁという感じです。どうやって求めたら良いのかまた調べて分かればブログに載せようかなと思います。

実際に五角柱を書いて回してみる

こんな感じになります。(のえらのアカウントの方ではすでに消してしまっていたので、相方さんのCodepenですけど!)
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”YwKZBq” default_tab=”result” user=”ChigusaYasoda”]See the Pen <a href=’http://codepen.io/ChigusaYasoda/pen/YwKZBq/’>YwKZBq</a> by ChigusaYasoda (<a href=’http://codepen.io/ChigusaYasoda’>@ChigusaYasoda</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

ここまでくればあとは、keyframeの回転角度を調整したり、位置固定のまま回転させればOKですね!

 

角度がわかっていただけでもかなり楽でした。多角形でトライするときは、角度を求めてしまえば、あとはなんとなくでもなんとかなりました。それにしても、算数は難しかったです!!


投稿日

カテゴリー:

投稿者: