<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/less">
*{
margin: 0;
padding: 0;
}
@w:200px;
.box{
@w;
height: @w;
position: relative;
margin: 100px auto 0;
perspective: 2000px;//景深
transform-style: preserve-3d;
ul{
list-style: none;
@w;
height: @w;
position: relative;
transform: rotateX(30deg) rotateY(45deg);
transform-style:preserve-3d ;//加到父亲盒子边上
animation: move 2s linear infinite;
transform-origin: @w / 2 @w /2 -@w/2;
//2s运动时长 linear 匀速运动 infinite不限次数
li{
position: absolute;
top:0;
left: 0;
100%;
background: rgba(151,255,151,0.6);
text-align:center;
line-height: @w;
font-size: 40px;
border: 2px solid rgba(25, 22, 177, 0.75);
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);
}
}
@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>