CSS3 @keyframes 实现匀速旋转魔方（搬运工）

原博文 * https://www.cnblogs.com/shihao905/p/6208324.html

* html

<div id="wrap">
            <div class="wrap">
                <div class="red">
                </div>
                <div class="blue">
                </div>
                <div class="green">
                </div>
                <div class="orange">
                </div>
                <div class="white">
                </div>
                <div class="yellow">
                </div>
            </div>
        </div>

* css

    @keyframes box {
                0% {
                    transform: rotatex(0deg) rotateY(0deg) rotateZ(0deg);
                }

                100% {
                    transform: rotatex(360deg) rotateY(360deg) rotateZ(360deg);
                }
            }

            #wrap {
                width: 400px;
                height: 400px;
                padding: 100px;
                margin: 150px auto;
                perspective: 1200px;
            }

            .wrap {
                width: 400px;
                height: 400px;
                transition: 5s;
                transform-style: preserve-3d;
                position: relative;
                animation: box 10s linear infinite;
                transform-origin: center center -200px;
                ;
            }

            .wrap div:nth-of-type(1) {
                position: absolute;
                background: #fe0000;
                background-image: url('http://img1.gtimg.com/tj/pics/hv1/117/208/2153/140051982.jpg');
                right: -400px;
                top: 0;
                transform: rotateY(90deg);
                transform-origin: left;
            }

            .wrap div:nth-of-type(2) {
                position: absolute;
                background: #0000fe;
                background-image: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=841408372,3004217725&fm=11&gp=0.jpg');
                bottom: -400px;
                left: 0;
                transform: rotatex(-90deg);
                transform-origin: top;
            }

            .wrap div:nth-of-type(3) {
                position: absolute;
                background: #00ff01;
                background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2388632836,3966607624&fm=26&gp=0.jpg');
                bottom: 0px;
                left: 0;
                backface-visibility: hidden;
            }

            .wrap div:nth-of-type(4) {
                position: absolute;
                background: #ff610a;
                background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=192610795,467565159&fm=26&gp=0.jpg');
                bottom: 0px;
                left: -400px;
                transform: rotateY(-90deg);
                transform-origin: right;
            }

            .wrap div:nth-of-type(5) {
                position: absolute;
                background: #fff;
                background-image: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2936477803,4198185787&fm=15&gp=0.jpg");
                top: -400px;
                left: 0;
                transform: rotatex(90deg);
                transform-origin: bottom;
            }

            .wrap div:nth-of-type(6) {
                position: absolute;
                background: #ffff00;
                background-image: url('http://img0.pclady.com.cn/pclady/1611/02/1612285_jyz.jpg');
                bottom: 0px;
                left: 0;
                transform: translateZ(-400px);
            }

            .wrap div {
                border-radius: 4px;
                overflow: hidden;
                width: 400px;
                height: 400px;
            }