どうも！LSSです！！
で作った直方体を元に、あれやこれや手を加えて水槽らしきものを作ろうとしてみました（途中）
「水槽」というのは、
いただいたコメントから拝借したアイデアなんですけどねｗ
また、今回の記事ネタは、同じくいただいたコメント、
大きさも色々変えられて良いですね。でも、使いどころが難しいｗ
ちなみに作成後にフロントとバックの中間にもう一面追加して入れることは可能でしょうか？
の回答の実践例でもあります。
作成するにあたり、数枚の透過画像を描く必要性が出てきましたが、そこを強引にCSSで描いた「ラフ」みたいな状態です。
こうしてみるとやはり、というか案の定というか、「画像を用意する必要はあるなぁ」と思いましたがｗ
水槽（作りかけ）
やろうとしている事の雰囲気だけは伝わるかな…伝わってほしいなｗ
ひょっこり出てくる謎の赤い物体はカニさんだと思ってください。
一応、コード
<style>
@keyframes roundside{
0%,30%{transform:rotateX(-20deg) rotateY(20deg) rotateZ(0deg);}
70%,100%{transform:rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);}
}
.box3d{
position:relative;
transform-style:preserve-3d;
width:200px;
height:150px;
top:50px;
left:50px;
animation:roundside 10s ease infinite alternate;
}
.box3d div{
position:absolute;
box-sizing:border-box;
backface-visibility:hidden;
}
.box3dfronta{
width:200px;
height:150px;
background-image:radial-gradient(closest-side,#888888ff 90%,#000000ff 95%,#00000000 100%),linear-gradient(90deg,#44cc44,#668866,#228822),linear-gradient(90deg,#44cc44,#668866,#228822);
background-repeat:no-repeat;
background-position:10% 115%,80% 0%,90% 0%;
background-size:50% 40%,8% 100%,4% 100%;
transform:translateZ(40px);
}
.box3dfrontb{
width:200px;
height:150px;
background-image:radial-gradient(closest-side,#cc4444ff 90%,#000000ff 95%,#00000000 100%),linear-gradient(90deg,#44cc44,#668866,#228822),linear-gradient(90deg,#44cc44,#668866,#228822);
background-repeat:no-repeat;
background-position:40% 100%,60% 0%,80% 0%;
background-size:20% 20%,5% 100%,7% 100%;
transform:translateZ(0px);
}
.box3dfrontc{
width:200px;
height:150px;
background-image:radial-gradient(closest-side,#888888ff 90%,#000000ff 95%,#00000000 100%),linear-gradient(90deg,#44cc44,#668866,#228822),linear-gradient(90deg,#44cc44,#668866,#228822);
background-repeat:no-repeat;
background-position:95% 110%,30% 0%,50% 0%;
background-size:30% 20%,8% 100%,11% 100%;
transform:translateZ(-40px);
}
.box3dback{
width:200px;
height:150px;
background-color:#ccccff;
transform:translateZ(-75px);
}
.box3dright{
width:150px;
height:150px;
background-color:#ccccff;
transform:rotateY(-90deg) translateZ(-125px);
}
.box3dleft{
width:150px;
height:150px;
background-color:#ccccff;
transform:rotateY(90deg) translateZ(-75px);
}
.box3dbottom{
width:200px;
height:150px;
background-color:#cccccc;
background-image:radial-gradient(closest-side,#00000000 60%,#000000dd 95%,#00000000 100%);
background-size:13px 13px;
transform:rotateX(90deg) translateZ(-75px);
}
</style>
<div class="box3d">
<div class="box3dfronta"> </div>
<div class="box3dfrontb"> </div>
<div class="box3dfrontc"> </div>
<div class="box3dback"> </div>
<div class="box3dright"> </div>
<div class="box3dleft"> </div>
<div class="box3dbottom"> </div>
</div>
オレンジ色部分は強引にCSSで絵を描こうとした部分で、仕組みとは無関係です。
やった事といえば…
- 正面・天井を排除
- 正面の代わりに正面と同じ向きの面を３枚用意して、translateZの値をずらして指定する事で３段階の奥行きを設定
- 背面・右側面・左側面をそれぞれ180度回転（裏返し）
- 「backface-visibility:hidden;」を各面に指定する事で、裏になった時に見えないように
- 左右に揺れるアニメーションを設定
といったところです。
あとがき
「奥行きの配置をずらした面を数枚用意して、全体を回転させる」が加わっただけでも、より立体らしさが増しますね^^
「謎の赤い物体」のように、角度によっては見えないものが、違う角度からだと姿を現す…ような仕掛けも扱えます。
さて、これを「水槽」と呼ぶには…徹底的に欠けているモノがありますが、皆さんお気づきですよね？
「魚おらんやんけ！」と。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
質問へのお返事ありがとうございました。
水族館風・水中花風・・・やってみましたが、今一つ。(^^;)
ゆっくり又考えてみます。