どうも！LSSです！！
【CSS】preserve-3dを使って直方体を描いてみたら案の定大変だった話
で、とりあえず直方体をCSSで描いてみました。
要領はなんとか分かったものの、サイズ変更時のtranslateZの値の指定が少々面倒です^^;
という事で、CSSが分からなくても、3Dの概念が分からなくても、画面上でスライダーをいじるだけで「直方体が描けるコード」を出力するツールをJavaScriptで作ってみました！
3D直方体コード生成ツール
コード
使い方
表示サンプル
直方体の傾きを示す「X:-20deg Y:-20deg Z:0deg」という表示
X軸回転、Y軸回転、Z軸回転に対応した３つのスライダー
直方体のサイズを示す「幅:200px 高さ:100px 厚さ:50px」という表示
幅、高さ、厚さに対応した３つのスライダー
直方体の６つの面の配色を選択できる６つのカラーパレット
背景色グレーの、長ったらしいコード
が、画面上に並んでいます。
合計６つのスライダーを適当に動かすと、それに応じて表示サンプルやコードの内容が変化します。
例えば、１つめのスライダーは「X軸回転」ですが、これを右に左に動かすと「X軸を軸とした回転」となり、直方体は上下にぐるんぐるん回ります。
また、６つのカラーパレットで、直方体を構成する６つの面の色を変更する事もできます。
完成した直方体を、ブログやWebサイトに配置したい場合、その時点での「コード（背景が灰色の箇所）」の長ったらしい内容をコピーし、貼り付けたいページのHTML内（例えば はてなブログ の場合は「HTML編集」画面）に貼り付ける事で使う事ができます^^
貼り付けた後のコードの修正について
各面に文字を入れる
コードの下のほうに、
<div class="box3d">
<div class="box3dfront"> </div>
<div class="box3dback"> </div>
<div class="box3dright"> </div>
<div class="box3dleft"> </div>
<div class="box3dtop"> </div>
<div class="box3dbottom"> </div>
</div>
という箇所があります。
このうち、例えば、
<div class="box3dfront"> </div>
となっているところに、
<div class="box3dfront">こんにちは！</div>
のように文章を入れると、それぞれの面に書いた文章が表示されるようになります。
面の色の透過をやめる
６つの面全て「少し透き通って見える」ように設定しています。
これは、
.box3dfront{
width:200px;
height:100px;
background-color:#ffffccdd;
transform:translateZ(25px);
}
の赤太字の色コードのうち、最後の「dd」を削って「#ffffcc」のようにすると、透過しない塗りつぶしになります。（各面ごとに設定があるので６カ所あります。）
あとがき
直方体を描けるツールを作ってみました。
これが、「複数の直方体を配置できる」とかになるとより楽しくなりそうですね^^
その場合、ツールのスライダー等の配置もちょっと切り替える仕組みとか必要になりそうで、作るのに時間がかかりそうな気はしますｗ
あと、完成したコードを貼り付けた場合、傾きによっては前後の文章に重なったりするので、その場合は適度に改行を入れるなどが必要になると思います。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
