旋转的剑
这是一个纯css3做出来的动画3d旋转的剑,go=>
<div class="box">
<div class="box1 box1_1">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5" style="border-top: 8px solid red;"></div>
</div>
<div class="box1 box1_2">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5" style="border-top: 8px solid green;"></div>
</div>
<div class="box1 box1_3">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5" style="border-top: 8px solid blue;"></div>
</div>
<div class="box1 box1_4">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5" style="border-top: 8px solid orange;"></div>
</div>
<div class="box1 box1_5">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5" style="border-top: 8px solid yellow;"></div>
</div>
<div class="box1 box1_6">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5" style="border-top: 8px solid purple;"></div>
</div>
<div class="box1 box1_7">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5" style="border-top: 8px solid pink;"></div>
</div>
</div>
<style>
.box{width: 80px;height: 100px;margin: 200px auto;position:relative;transform-style:preserve-3d;perspective:5000px;animation:haha 3s linear infinite;}
.box .box1{width:80px;height: 100px;position:absolute;left:0;top:0;transition:all 3s;opacity:0.8;}
.box .box1_7{transform:translateZ(150px);}
.box .box1_2{transform:translateZ(-150px);}
.box .box1_3{transform:rotateY(-60deg) translateX(28px) translateZ(-150px);}
.box .box1_4{transform:rotateY(-120deg) translateX(28px) translateZ(150px);}
.box .box1_5{transform:rotateY(60deg) translateX(-28px) translateZ(150px);}
.box .box1_6{transform:rotateY(120deg) translateX(-28px) translateZ(-150px);}
.box:hover .box1{transform:rotateX(720deg) rotateY(720deg) rotateZ(720deg);}
.box1_1 div{background:red;}
.box1_2 div{background:green;}
.box1_3 div{background:blue;}
.box1_4 div{background:orange;}
.box1_5 div{background:yellow;}
.box1_6 div{background:purple;}
.box1_7 div{background:pink;}
.box1 .div1{width: 10px;height: 8px;margin: 0 auto;border-radius:4px 4px 0 0;}
.box1 .div2{width: 8px;height: 16px;margin: 0 auto;}
.box1 .div3{width: 20px;height: 6px;margin: 0 auto;border-radius:4px 4px 0 0;}
.box1 .div4{width: 8px;height: 60px;margin: 0 auto;}
.box1 .div5{width: 0;height: 0;border-left: 4px solid transparent;border-right: 4px solid transparent;margin: 0 auto;background:#fff;}
@keyframes haha{
0%{}
100%{transform:rotateY(360deg);
}
</style>
效果还是可以的