css3旋转简易六面体

  <style>
        *{margin: 0;}
        .all{width: 200px;height: 200px;position: relative;left: 50%;margin-left: -100px;top: 200px;perspective: 3000px;-webkit-perspective:3000px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
        .box{width: 200px;height: 200px;position: absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
        .box div{margin: 0;width: 200px;height: 200px;color: #fff;font-size: 30px;text-align: center;line-height: 200px;position: absolute;top: 0;left: 0;opacity: 0.7;}
        .front{transform: translateZ(100px)}
        .back{transform: translateZ(-100px)}
        .left{transform: translateX(-100px) rotateY(-90deg);}
        .right{transform: translateX(100px) rotateY(90deg);}
        .top{transform: translateY(100px) rotateX(90deg);}
        .bottom{transform: translateY(-100px) rotateX(-90deg);}


        .safa{animation: xx 5s infinite linear;-webkit-animation: xx 5s infinite linear;}
        @keyframes xx{
            0%{transform: rotate3d(0,1,0,0deg)}
            /*25%{transform: rotate3d(1,1,1,50deg)}*/
            /*50%{transform: rotate3d(1,0,1,120deg)}*/
            /*75%{transform: rotate3d(0,1,1,90deg)}*/
            100%{transform: rotate3d(0,1,0,360deg)}
        }
    </style>

    <div class="all">
        <div class="box safa">
            <div class="front" style="background-color: cadetblue">1</div>
            <div class="back" style="background-color: #145345">2</div>
            <div class="left" style="background-color: #789523">3</div>
            <div class="right" style="background-color: #132457">4</div>
            <div class="top" style="background-color: #325465">5</div>
            <div class="bottom" style="background-color: red">6</div>
        </div>
    </div>

转载于:https://my.oschina.net/u/2478033/blog/513181