效果如本博客中右边呢个浅色框框，来自webpack首页(IE绕路0_0)

github地址：

思路：

1、关键是父元素ul的这2个属性

  a:transform-style: preserve-3d; 

  b:transform: rotateX(-33.5deg) rotateY(45deg);

让ul先有点偏移旋转的效果！

2、分别让每个li相对于ul前后左右上下位移一定距离是li宽度的一半，6个面上的li的背景色是从中间向四周的渐变色

3、最下面的li当作阴影，需要特殊处理

4、定义动画帧让ul执行注意animation的参数和兼容性

/*animation: name duration timing-function delay iteration-count direction;*/
/*name 规定需要绑定到选择器的 keyframe 名称。。*/
/*duration 规定完成动画所花费的时间，以秒或毫秒计。*/
/*timing-function 规定动画的速度曲线。*/
/*delay 规定在动画开始之前的延迟。*/
/*iteration-count 规定动画应该播放的次数。*/
/*direction 规定是否应该轮流反向播放动画。*/

撸码如下

HTML

CSS

.will_rotate{ width: 150px; height: 150px; margin: 0 auto; position: relative; } .rotate_parent, .rotate_parent li { position: absolute; display: block; } .rotate_parent{ width: 100%; height: 100%; padding: 0; -webkit-transform-origin: 50px 50px; transform-origin: 50px 50px; -webkit-transform: rotateX(-33.5deg) rotateY(45deg); transform: rotateX(-33.5deg) rotateY(45deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: willRotate 3s ease-in-out infinite 2s; animation: willRotate 3s ease-in-out infinite alternate; top: 20%; } .rotate_parent .tip_back, .rotate_parent .tip_front, .rotate_parent .tip_left, .rotate_parent .tip_right, .rotate_parent .tip_top { background: radial-gradient(transparent 30%,rgba(126,17,91,.2) 100%); } .rotate_parent li { width: 100px; height: 100px; transition: -webkit-transform 1s ease-in-out; transition: transform 1s ease-in-out; } .rotate_parent .tip_front { -webkit-transform: translateZ(50px); transform: translateZ(50px); } .rotate_parent .tip_back { -webkit-transform:translateZ(-50px); transform:translateZ(-50px); } .rotate_parent .tip_right { -webkit-transform: rotateY(90deg) translateZ(50px); transform: rotateY(90deg) translateZ(50px); } .rotate_parent .tip_left { -webkit-transform: rotateY(90deg) translateZ(-50px); transform: rotateY(90deg) translateZ(-50px); } .rotate_parent .tip_top { -webkit-transform: rotateX(90deg) translateZ(50px); transform: rotateX(90deg) translateZ(50px); } .rotate_parent .tip_bottom{ -webkit-transform: rotateX(90deg) translateZ(-50px); transform: rotateX(90deg) translateZ(-50px); } .rotate_parent .tip_floor { box-shadow: -300px 0 50px rgba(0,0,0,.3); -webkit-backface-visibility: visible; backface-visibility: visible; width: 110px; height: 110px; left: 295px; background-color: transparent; -webkit-transform: rotateX(90deg) translateZ(-60px); transform: rotateX(90deg) translateZ(-60px); } @-webkit-keyframes willRotate{ 0%{ transform:rotateX(-33.5deg) rotateY(45deg); } 100%{ transform:rotateX(-33.5deg) rotateY(360deg); } } @keyframes willRotate{ 0%{ transform:rotateX(-33.5deg) rotateY(45deg); } 100%{ transform:rotateX(-33.5deg) rotateY(360deg); } }

欢迎采购- -