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

taka_oj
|
2015年10月26日
| コメントはまだありません
| JavaScript、SVG

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

デモページは、こちら

JavaScript、SVG