废话不多说直接上代码 （我用的是less，修改为css可直接展示出来）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/less">
*{
margin: 0;
padding: 0;
}
@w:200px;
.box{
width: @w;
height: @w;
position: relative;
margin: 200px auto 0;
perspective: 2000px;//景深
transform-style: preserve-3d;
ul{
list-style: none;
width: @w;
height: @w;
position: relative;
transform: rotateX(30deg) rotateY(45deg);
transform-style: preserve-3d;// 加到父亲盒子上边
animation: move 5s linear infinite;
transform-origin: @w / 2 @w / 2 -@w/2;
// 2s 运动时长 linear匀速运动 infinite 不限次数运动
li{
position: absolute;
top: 0;
left: 0;
width: 100%;
background: rgba(151,255,151,0.6);
text-align: center;
line-height: @w;
font-size: 40px;
border: 1px solid #000;
box-sizing: border-box;
}
li:nth-child(1){
transform: translateY(-@w) rotateX(90deg);
transform-origin: bottom;
}
li:nth-child(2){
transform: translateY(@w) rotateX(-90deg);
transform-origin: top;
}
li:nth-child(3){
transform: translateX(-@w) rotateY(-90deg);
transform-origin: right;
}
li:nth-child(4){
transform: translateX(@w) rotateY(90deg);
transform-origin: left;
}
li:nth-child(5){
transform: translateZ(-@w) rotateX(180deg);
}
}
@keyframes move{
0%{
transform: rotateX(0) rotateY(0);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
}
</style>
<script src="js/less.js"></script>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
<script>
</script>
