3d环境 结合动画 伪类hover 结合的小盒子

<style>

body{
height:800px;
background:linear-gradient(yellow,black);
}
.cute{
width:404px;
height:404px;
margin:100px auto 0;
transform-style:preserve-3d;
position:relative;
animation:spin 3s infinite linear;
}
@keyframes spin{
100%{
transform:rotate3d(1,1,1,360deg);
}
}
.cute:hover .square1{
transform:rotateY(-90deg) translateZ(200px);
}
.square1 img{
width:100%;
height:100%;
}
.cute:hover .square2{
transform:rotateY(90deg) translateZ(200px);
}
.square2 img{
width:100%;
height:100%;
}
.cute:hover .square3{
transform:rotateX(90deg) translateZ(200px);
}
.square3 img{
width:100%;
height:100%;
}
.cute:hover .square4{
transform:rotateX(-90deg) translateZ(200px);
}
.square4 img{
width:100%;
height:100%;
}
.cute:hover .square5{
transform: translateZ(600px) ;
}
.square5 img{
width:100%;
height:100%;
}
.cute:hover .square6{
transform:rotateY(180deg) translateZ(200px);
}
.square6 img{
width:100%;
height:100%;
}
.square1 ,.square2, .square3, .square4, .square5, .square6{
width:400px;
height:400px;
border:1px solid dodgerblue;
position:absolute;
background:white;
}
.square1{
z-index:6;
transform-origin:left;
transform:rotateY(-90deg);
transition: all 1s;
}
.square2{
z-index:5;
transform-origin:right;
transform:rotateY(90deg);
transition: all 1s;
}
.square3{
z-index:4;
transform-origin:top;
transform:rotateX(90deg);
transition: all 1s;
}
.square4{
z-index:3;
transform-origin:bottom;
transform:rotateX(-90deg);
transition: all 1s;
}
.square5{
z-index:2;
transform:translateZ(400px);
transition: all 1s;
}
.square6{
z-index:1;
transform: rotateY(180deg);
transition: all 1s;
}
span{
width:200px;
height:200px;
display:block;
background:red;
font-size:100px;
text-align:center;
line-height:200px;
position:absolute;
color:white;
top:100px;
left:100px;
opacity: 0.7;
border:1px solid white;
}
.in1{
transform-origin:left;
transform:translateZ(100px) rotateY(-90deg);
}
.in2{
transform-origin:right;
transform:translateZ(100px) rotateY(90deg);
}
.in3{
transform-origin:top;
transform:translateZ(100px) rotateX(90deg);
}
.in4{
transform-origin:bottom;
transform:translateZ(100px) rotateX(-90deg);
}
.in5{
transform:translateZ(300px)
}
.in6{
transform:translateZ(100px) rotateY(180deg) ;
}

</style>

<div class="cute">
<div class="square1">
<img src="../img/silly qiuqiu.jpg">
</div>
<div class="square2">
<img src="../img/Adazhuang.jpeg">
</div>
<div class="square3">
<!--<img src="../img/silly qiuqiu.jpg">-->
</div>
<div class="square4">
<img src="../img/get_marry tong.jpg">
</div>
<div class="square5">
<img src="../img/Torlar.Swifty.jpg">
</div>
<div class="square6">
<!--<img src="../img/silly qiuqiu.jpg">-->
</div>
<span class="in1">1</span>
<span class="in2">2</span>
<span class="in3">3</span>
<span class="in4">4</span>
<span class="in5">5</span>
<span class="in6">6</span>
</div>