纯手写的css3正方体旋转效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>css3旋转立方体效果</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 400px;height: 400px;border: 1px solid #000;margin: 30px auto;perspective: 1200px;/*设置元素被查看位置的视图----景深 看物体的远近 数值大越远*/-webkit-perspective: 1200px; /* Safari 和 Chrome */}.box ul{width: 300px;height: 300px;border: 1px solid #000000;position: relative;transform-style: preserve-3d;  /*设置3d场景*/-webkit-transform-style: preserve-3d;    /* Safari 和 Chrome */animation: move 2s infinite linear;  /*运动时间代表动画循环快慢*/transform-origin: center center 150px; /*第三个需要给具体数值*/-webkit-transform-origin:center center 150px;margin: 50px;}.box ul li{width: 300px;height: 300px;line-height: 300px;position: absolute;font-size: 50px;transition: all .5s;text-align: center;list-style: none;}.box ul li:nth-of-type(1){background: red;opacity: 0.5;}.box ul li:nth-of-type(2){background: blue;opacity: 0.5;transform: translateX(300px) rotateY(-90deg);-webkit-transform: translateX(300px) rotateY(-90deg);    /* Safari 和 Chrome */transform-origin: left;-webkit-transform-origin:left;}.box ul li:nth-of-type(3){background: blueviolet;opacity: 0.5;transform: translateX(-300px) rotateY(90deg);-webkit-transform: translateX(-300px) rotateY(90deg);transform-origin: right;-webkit-transform-origin:right;}.box ul li:nth-of-type(4){background: brown;opacity: 0.5;transform: translateY(-300px) rotateX(-90deg);-webkit-transform: translateY(-300px) rotateX(-90deg);transform-origin: bottom;-webkit-transform-origin:bottom;}.box ul li:nth-of-type(5){background: deeppink;opacity: 0.5;transform: translateY(300px) rotateX(90deg);-webkit-transform: translateY(300px) rotateX(90deg);transform-origin: top;-webkit-transform-origin:top;}.box ul li:nth-of-type(6){background: yellow;opacity: 0.5;transform: translateZ(300px);-webkit-transform: translateZ(300px);}@keyframes move{from{transform: rotateY(0deg);}to{transform: rotateY(360deg);}}@-webkit-keyframes move{from{-webkit-transform: rotateY(0deg);}to{-webkit-transform: rotateY(360deg);}}</style></head><body><div class="box"><ul><li>最骚的css3</li><li>最骚的css3</li><li>最骚的css3</li><li>最骚的css3</li><li>最骚的css3</li><li>最骚的css3</li></ul></div></body>
</html>