1、h5立方體效果圖
立方體
2谴古、h5立方體源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #fff;
background: rgba(255, 255, 255,0.75);
color: #fff;
font-size: 100px;
line-height: 200px;
text-align: center;
position: absolute;
transition: 2s;
}
body{
perspective: 800px;
display: flex;
justify-content: center;
align-items: center;
background: #000;
height: 100vh;
}
.boxs,.boxs2{
position: absolute;
transform: rotateX(45deg) rotateY(45deg);
transform-style: preserve-3d;
width: 200px;
height: 200px;
animation: go 3s infinite linear;
animation-play-state: running;
}
.boxs:hover{
animation-play-state: paused;
}
.box:nth-of-type(2){transform: rotateY(-90deg) translateZ(100px);}
.box:nth-of-type(3){transform: rotateX(90deg) translateZ(100px);}
.box:nth-of-type(4){transform: rotateX(-90deg) translateZ(100px);}
.box:nth-of-type(5){transform: rotateY(0deg) translateZ(100px);}
.box:nth-of-type(6){transform: rotateY(180deg) translateZ(100px);}
.boxs2>.box:nth-of-type(1){transform: rotateY(90deg) translateZ(25px);}
.boxs2>.box:nth-of-type(2){transform: rotateY(-90deg) translateZ(25px);}
.boxs2>.box:nth-of-type(3){transform: rotateX(90deg) translateZ(25px);}
.boxs2>.box:nth-of-type(4){transform: rotateX(-90deg) translateZ(25px);}
.boxs2>.box:nth-of-type(5){transform: rotateY(0deg) translateZ(25px);}
.boxs2>.box:nth-of-type(6){transform: rotateY(180deg) translateZ(25px);}
.boxs2>.box{
width: 50px;
height: 50px;
font-size: 36px;
line-height: 50px;
background: rgba(140, 228, 8, 0.25);
}
.boxs2{
width: 50px;
height: 50px;
}
.first{
transform-origin: 0%;
transform: translateZ(100px) translateX(200px) rotateY(90deg);
}
.boxs:hover .first{
transform: translateZ(100px) translateX(200px) rotateY(0deg);
}
@keyframes go{
0%{transform: rotateX(0deg) rotateY(0deg);}
100%{transform: rotateX(720deg) rotateY(360deg);}
}
</style>
</head>
<body>
<div class="boxs2">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="boxs">
<div class="box first">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</body>
</html>
