どうも!LSSです!! 【CSS】preserve-3dを使って直方体を描いてみたら案の定大変だった話 で、とりあえず直方体をCSSで描いてみました。 要領はなんとか分かったものの、サイズ変更時のtranslateZの値の指定が少々面倒です^^; という事で、CSSが分からなくても、3Dの概念が分からなくても、画面上でスライダーをいじるだけで「直方体が描けるコード」を出力するツールをJavaScriptで作ってみました! 3D直方体コード生成ツール 使い方 貼り付けた後のコードの修正について あとがき 3D直方体コード生成ツール コード 使い方 表示サンプル 直方体の傾きを示す「X:-20deg Y:-20deg Z:0deg」という表示 X軸回転、Y軸回転、Z軸回転に対応した3つのスライダー 直方体のサイズを示す「幅:200px 高さ:100px 厚さ:50px」という表示 幅、高さ、厚