body:
css:.container{margin:100px auto;width:200px;perspective:390px;transform-style:preserve-3d;} .wood{position:relative;height:20px;width:200px;transform-style: preserve-3d; animation:spin 2s infinite linear;padding-bottom:10px;} .wood>div{position:absolute;background:#8a5b0f;backface-visibility:hidden;} .left,.right{width:20px;height:20px;} .back,.top,.bottom,.front{width:200px;height:20px;} .top,.bottom,.left,.right{animation:color 2s infinite linear;} /* 六面的角度 */ .wood .front{transform: translateZ(10px);} .wood .back{transform: rotateY(180deg) translateZ(10px);} .wood .top{transform: rotateX(90deg) translateZ(10px);background-color:#f0c175;} .wood .bottom{transform: rotateX(-90deg) translateZ(10px);} .wood .left{transform: rotateY(-90deg) translateZ(10px);} .wood .right{transform: rotateY(90deg) translateZ(190px);} /*.wood:nth-child(1){animation-delay:-2.8s;}*/ /*角度的变化*/ @keyframes spin { from{transform: rotateY(0deg);} to{transform: rotateY(360deg);} } /*颜色的变化*/ @keyframes color { from{background:#f0c175;} to {background:#8a5b0f;} }
js:/************************************************ * 3D木板旋转 * * Created [2018/01/12] * * @author [Ye] * * item [要加入几个木板【不能超过100】] * * id [选择器] * ************************************************/ boardRotate(10,$('.container')); function boardRotate(item,id){ var item=item; // 定义条数 var item_html=''; // 定义容器 for(var i=0;i