CSS代码:
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
position: relative;
left: 200px;
top: 200px;
transition: 5s all;
transform-origin: center;
perspective: 1000;
transform-style: preserve-3d;
}
#box:hover{
transform: rotateY(360deg);
}
#box>div{
width: 200px;
height: 200px;
position: absolute;
text-align: center;
line-height: 200px;
color: white;
font-size: 60px;
}
.one{
background-color: black;
}
.two{
background-color: orange;
transform-origin: left;
transform: rotateY(90deg);
}
.three{
background-color: lightslategray;
transform: translateZ(-200px);
}
.four{
background-color: aquamarine;
transform-origin: right;
transform: rotateY(-90deg);
}
.five{
transform-origin: top;
background-color: blueviolet;
transform: rotateX(-90deg);
}
.six{
transform-origin: bottom;
background-color: saddlebrown;
transform: rotateX(90deg);
}
JS代码:
<div id="box">
<div class="one">
1
</div>
<div class="two">
2
</div>
<div class="three">
3
</div>
<div class="four">
4
</div>
<div class="five">
5
</div>
<div class="six">
6
</div>
</div>
效果如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/accddbcc1c81fb32e0c80ff4e3506520.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/51f75bdcf24bb4d253a3982628bc4bac.png)