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

CSSのtransformで多角柱を組み立てる応用で、側面を三角形にすることで角錐をつくっています。高さの指定はcss transformのscaleY()で縦方向に伸び縮みさせることで調整しています。

角数を指定するだけで3角錐~円錐(ただしとても処理が重たくなる)まで生成できます。
polygon、triangleの色も指定できるようにしてみました。

このコードで、1ページ中に複数の多角錐を表示させることができます。
描画先のdivにcssのtransformをかけることで角錐を回転さすことができます。。
(今回は立体とわかりやすいように左側の角錐をアニメーションさせてあります)

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

▼JavaScript


▼CSS

div{
	transform-style: preserve-3d;
	width:250px;
	height:250px;
	position:relative;
	transform-origin:100px 140px;
	transform:rotateX(-30deg) rotateY(-20deg) scaleY(1.2);
	padding:25px;
	float:left;
}
svg,polygon{
	transform-style: preserve-3d;
	position:absolute;
	width:200px;
	height:200px;
}

▼HTML

デモページは、こちら