＊JavaScriptで背景色が自動的に変化するプログラム＆アニメーションも取り入れた3Dボックスです＊
3Dボックス自体は、rotateX/Y、translateZプロパティを使うことで比較的簡単にできますが、アニメーションやJavaScriptと組み合わせることで、さらに複雑な動きを実装することも可能です。
アニメーションはCSSでもJavaScriptでも実装することが可能ですが、今回はCSSのanimationプロパティで3Dの箱が角度をつけながら動くアニメーションをつけてみました。
また、JavaScriptのSetInterval( )メソッドで、1000ミリ秒ごとに3Dボックスの背景色が変わるようにプログラムを設定。
定期的に同じ色を繰り返すように指定しても良いのですが、今回はランダムな色になるようにMath.floor(Math.random() * 100)で、1～100までの数値をランダムに取得し、それを足し合わせてRGBA値に代入することで、ランダムな色になるようにしています。（透明度は.5で固定）。
このプログラム自体はclass名で要素を取得した上で、styleでbackground-colorプロパティの値が書き換えられるようにするだけなので、そこまで複雑なものではありません。
【 CSS・JavaScript 】
上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）
HTML・CSS・JavaScript
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
.samplet_box_in_box {
font-family:"游ゴシック体 Medium","游ゴシック体","游ゴシック Medium","Yu Gothic","YuGothic",sans-serif;
display: flex;
flex-direction: column;
height: 500px;
align-items: center;
justify-content: center;
}
.sample_threedbox {
width: 100px;
height: 100px;
transform-style: preserve-3d;
animation: sampleboxmove 4s linear 0s backwards infinite alternate;
}
@keyframes sampleboxmove {
0% {transform: rotate3d(0, 0, 0, 0deg);}
50% {transform: rotate3d(1, 1, -1, 45deg);}
100% {transform: rotate3d(1, -1, -1, 45deg);}
}
.sample_plate {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
color: #fff;
transition: .5s;
}
.sample_onep {
background: rgba(127, 142, 246, 0.49);
transform: translateZ(50px);
}
.sample_twop{
background: rgba(127, 207, 246, 0.56);
transform: translateZ(-50px);
}
.sample_threep {
background: rgba(252, 252, 169, 0.48);
transform: rotateY(90deg) translateZ(50px);
}
.sample_fourp {
background: rgba(246, 127, 184, 0.34);
transform: rotateY(-90deg) translateZ(50px);
}
.sample_fivep {
background: rgba(173, 245, 214, 0.52);
transform: rotateX(90deg) translateZ(50px);
transition: all .8s;
}
.sample_sixp {
background: rgba(127, 246, 171, 0.49);
transform: rotateX(-90deg) translateZ(50px);
}
</style>
</head>
<body>
<div class="samplet_box_in_box">
<div id="sample_threed_b" class="sample_threedbox">
<div class="sample_onep sample_plate" style="font-size:.85rem;">front</div>
<div class="sample_twop sample_plate">back</div>
<div class="sample_threep sample_plate">right</div>
<div class="sample_fourp sample_plate">left</div>
<div id="sample_five_p" class="sample_fivep sample_plate">top</div>
<div class="sample_sixp sample_plate">bottom</div>
</div>
</div>
<script type="text/javascript">
{
const sample_onep = document.querySelector('.sample_onep');
const sample_twop = document.querySelector('.sample_twop');
const sample_threep = document.querySelector('.sample_threep');
const sample_fourp = document.querySelector('.sample_fourp');
const sample_fivep = document.querySelector('.sample_fivep');
const sample_sixp = document.querySelector('.sample_sixp');
setInterval( () => {
const sample_randomNum1 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
const sample_randomNum2 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
const sample_randomNum3 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
sample_onep.style.backgroundColor = `rgba(${sample_randomNum1}, ${sample_randomNum2}, ${sample_randomNum3},0.5)`;
},1000);
setInterval( () => {
const sample_randomNum1 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
const sample_randomNum2 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
const sample_randomNum3 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
sample_twop.style.backgroundColor = `rgba(${sample_randomNum1}, ${sample_randomNum2}, ${sample_randomNum3},0.5)`;
},1000);
setInterval( () => {
const sample_randomNum1 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
const sample_randomNum2 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
const sample_randomNum3 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
sample_threep.style.backgroundColor = `rgba(${sample_randomNum1}, ${sample_randomNum2}, ${sample_randomNum3},0.5)`;
},1000);
setInterval( () => {
const sample_randomNum1 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
const sample_randomNum2 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
const sample_randomNum3 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
sample_fourp.style.backgroundColor = `rgba(${sample_randomNum1}, ${sample_randomNum2}, ${sample_randomNum3},0.5)`;
},1000);
setInterval( () => {
const sample_randomNum1 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
const sample_randomNum2 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
const sample_randomNum3 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
sample_five_p.style.backgroundColor = `rgba(${sample_randomNum1}, ${sample_randomNum2}, ${sample_randomNum3},0.5)`;
},1000);
setInterval( () => {
const sample_randomNum1 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
const sample_randomNum2 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
const sample_randomNum3 = 50 + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);
sample_sixp.style.backgroundColor = `rgba(${sample_randomNum1}, ${sample_randomNum2}, ${sample_randomNum3},0.5)`;
},1000);
}
</script>
</body>
</html>
