JavaScriptでSVGのpolygonとrectを生成し、CSSのtransformで多角柱にする


Circle上に多角形Polygonを描画すると同等の手法でフタになるポリゴンを生成し、この円を基準に側面rectの位置合わせに利用しています。
角数を指定するだけで3角柱~円柱(ただしとても処理が重たくなる)まで生成できます。
polygon、rectの色も指定できます。

このデモはChrome46で動作確認をしています(IEでは動作しません)

このコードで、1ページ中に複数の多角柱を表示させることができます。
描画先のdivにcssのtransformをかけることで角柱を回転さすことができます。。
(今回は立体とわかりやすいように斜め上からみているようにCSSでrotateしています)

↓以下が実際のソースサンプルです。

▼JavaScript

▼CSS

▼HTML

デモページは、こちら