Enjoy Creating
Web & Mobile Apps
MENU BOX
Webで
遊ぼ！
OPEN
2021・05・29
＊クリック（タップ）するとボックスが回転してフタが開閉します＊
一見平面に見える「front」と書かれたボックスをクリックすると、回転して3Dであることがわかります。回転させるだけだと面白くないので、フタが開くようにしてみました。
フタが開いた状態のボックスをクリックすると、フタが閉じて元の状態に戻ります。
使用機能：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 {
cursor: pointer;
width: 100px;
height: 100px;
transform-style: preserve-3d;
}
.sample_threedbox_active {
animation: sampleboxmove 4s linear 0s forwards 1 normal;
}
@keyframes sampleboxmove {
20% {transform: rotate3d(-1, 1, -1, -0.2turn);}
40% {transform: rotate3d(-1, 1, -1, -0.4turn);}
60% {transform: rotate3d(-1, 1, -1, -0.6turn);}
80% {transform: rotate3d(-1, 1, -1, -0.8turn);}
100% {transform: rotate3d(-1, 1, -1, -0.8turn);}
}
.sample_threedbox_back {
animation: sampleboxmove2 4s linear 0s forwards 1 normal;
}
@keyframes sampleboxmove2 {
0% {transform: rotate3d(-1, 1, -1, -0.8turn);}
20% {transform: rotate3d(-1, 1, -1, -0.8turn);}
40% {transform: rotate3d(-1, 1, -1, -0.6turn);}
60% {transform: rotate3d(-1, 1, -1, -0.4turn);}
80% {transform: rotate3d(-1, 1, -1, -0.2turn);}
100% {transform: rotate3d(0, 0, 0, 0turn);}
}
.sample_plate {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
color: #fff;
}
.sample_onep {
background: rgba(246, 127, 184, 0.71);
transform: translateZ(50px);
}
.sample_twop{
background: rgba(246, 127, 184, 0.56);
transform: translateZ(-50px);
}
.sample_threep {
background: rgba(252, 169, 209, 0.73);
transform: rotateY(90deg) translateZ(50px);
}
.sample_fourp {
background: rgba(246, 127, 184, 0.34);
transform: rotateY(-90deg) translateZ(50px);
}
.sample_fivep {
background: rgba(245, 173, 207, 0.63);
transform: rotateX(90deg) translateZ(50px);
transition: all .8s;
}
.sample_sixp {
background: rgba(246, 127, 184, 0.77);
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>
<p style="color:tomato; font-size:.78rem; margin-top: 40px;">＊上のボックスをクリック（タップ）すると、回転＆開閉します！＊</p>
</div>
<script type="text/javascript">
{
const sample_threed_b = document.getElementById('sample_threed_b');
const sample_five_p = document.getElementById('sample_five_p')
sample_threed_b.addEventListener('click',function () {
if (sample_threed_b.classList.contains('sample_threedbox_active')) {
sample_five_p.style.transform = 'rotateX(90deg) translateZ(50px)';
sample_threed_b.classList.remove('sample_threedbox_active');
sample_threed_b.classList.add('sample_threedbox_back');
}
else {
sample_threed_b.classList.remove('sample_threedbox_back');
sample_threed_b.classList.add('sample_threedbox_active');
setTimeout(function () {
sample_five_p.style.transform = 'rotateX(90deg) translateZ(100px)';
},3500);
}
});
}
</script>
</body>
</html>