源代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #000;
}
.outer{
width: 400px;
height: 400px;
border:1px solid #000;
margin: 300px 500px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-38deg)rotateY(-35deg) ;
animation: mofang 5s linear infinite;
}
@keyframes mofang{
from{
transform:rotateX(0deg) rotateY(0deg);
}
50%{
transform:rotateY(120deg) rotateZ(240deg);
}
to{
transform:rotateX(360deg) rotateY(360deg);
}
}
.inner{
width: 400px;
height: 400px;
border:2px solid #000;
position: absolute;
-webkit-backface-visibility:visibility;
opacity: 0.5;
}
.inner:nth-child(1){
transform: translateY(200px)rotateX(90deg);
background-color: orange;
}
.inner:nth-child(2){
transform: translateY(-200px)rotateX(90deg);
background-color: blue;
}
.inner:nth-child(3){
transform: translateY(100px)rotateX(90deg);
}
.inner:nth-child(4){
transform: translateY(-100px)rotateX(90deg);
}
.inner:nth-child(5){
transform: translateZ(200px);
background-color: pink;
}
.inner:nth-child(6){
transform: translateZ(100px);
}
.inner:nth-child(7){
transform: translateZ(-200px);
background-color: yellow;
}
.inner:nth-child(8){
transform: translateZ(-100px);
}
.inner:nth-child(9){
transform: translateX(100px)rotateY(90deg);
}
.inner:nth-child(10){
transform: translateX(-100px)rotateY(90deg);
}
.inner:nth-child(11){
transform: translateX(200px)rotateY(90deg);
background-color: red;
}
.inner:nth-child(12){
transform: translateX(-200px)rotateY(90deg);
background-color: green;
}
.inner:nth-child(13){
transform:rotateY(90deg);
}
.inner:nth-child(14){
transform:rotateY(90deg);
}
.inner:nth-child(15){
transform:rotateX(90deg);
}
.inner:nth-child(16){
transform:rotateZ(90deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</body>
</html>
效果图:
