CSSのtransformを使えば色々と位置を調整できる.

今回はその例の一つとして、以下のようなdivの配置を示す.

コード

CSSのtransformにおいて回転、移動、回転させて上記のdivの形を作っている.

rotateをするときはdivの中心を回転軸として回転させます。

例として、deg60capではまず60度周り、divが60度傾いている状態で8emだけずらし、最後斜めになっているdivを逆方向に60度動かすことでできています。

おわりに

すごいCSSを組んでいる方はCSSだけでanimationを組んでいる人もいますね。ぜひそこまでいつかいきたいですが。。。