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