<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
ul{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px dashed greenyellow;
transform-style: preserve-3d;
position: relative;
animation: move 5s infinite linear;
}
@keyframes move{
0%{
transform: rotatex(0deg) rotateY(0deg) rotateZ(0deg);
}
100%{
transform: rotatex(360deg) rotateY(360deg) rotateZ(360deg);
}
}
li{
width: 200px;
height: 200px;
position: absolute;
top: 0px;
left: 0px;
}
li:nth-last-of-type(1){
background: red;
transform: translatex(100px) rotateY(90deg);
}
li:nth-last-of-type(2){
background: blue;
transform: translatex(-100px) rotateY(90deg);
}
li:nth-last-of-type(3){
background: yellow;
transform: translatey(100px) rotatex(90deg);
}
li:nth-last-of-type(4){
background: green;
transform: translatey(-100px) rotatex(90deg);
}
li:nth-last-of-type(5){
background: pink;
transform: translatez(100px);
}
li:nth-last-of-type(6){
background: gray;
transform: translatez(-100px);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
要实现旋转盒子的3D模型,在这里要引入3D坐标:
transform-style: preserve-3d
先让每个li进行位移,让它们平移正方体的六个面,并按x轴或y轴旋转形成一个闭合的正方体。
最后实现动画时,让它沿着各个轴旋转即可。