body{
               background-image: linear-gradient(to right top, #8e44ad 0%, #3498db 100%);
            }

            #rubix-cube {
                margin: 200px auto;
                width: 200px;
                height: 200px;
                -webkit-perspective: 5000px;
                -webkit-perspective-origin: 956% -200%;
                perspective: 5000px;
                perspective-origin: 956% -200%;
            }
            .cubeAP {
                transform-style: preserve-3d;
                -webkit-transform-style: preserve-3d;
                width: 100%;
                height: 100%;
                -webkit-animation: rotate 6s infinite linear;
                animation: rotate 6s infinite linear;
            }
            .cubeAP div {
                background: #000;
                width: 100%;
                height: 100%;
                position: absolute;
                transform-origin: 50% 50%;
                -webkit-transform-origin: 50% 50%;
                border-radius: 2px;
            }
            div span {
                display: inline-block;
                width: 49px;
                height: 50px;
                margin: 7px;
                border-radius: 4px;
                -webkit-border-radius: 4px;
            }
            .up {
                transform: rotateX(90deg) translateZ(100px);
              -webkit-transform: rotateX(90deg) translateZ(100px);
            }
            .right {
                transform: rotateY(90deg) translateZ(100px);
              -webkit-transform: rotateY(90deg) translateZ(100px);
            }
            .front {
                transform: translateZ(100px);
                -webkit-transform: translateZ(100px);
            }
            .left {
                transform: rotateY(90deg) translateZ(-100px);
              -webkit-transform: rotateY(90deg) translateZ(-100px);
            }
            .down {
                transform: rotateX(90deg) translateZ(-100px);
              -webkit-transform: rotateX(90deg) translateZ(-100px);
            }
            .back {
                transform: translateZ(-100px);
               -webkit-transform: translateZ(-100px);
            }

            .up span {
                background: #FF8C00;
            }
            .right span {
                background: #0000CD;
            }
            .front span {
                background: #FF0000;
            }

            .left span {
                background: #FFF5EE;
            }

            .down span {
                background: #008000;
            }

            .back span {
                background: #FFD700;
            }

            @-webkit-keyframes rotate {
                0%, 100% {
                    transform: rotateY(0);
                    -webkit-transform: rotateY(0);
                }
                25% {
                  transform: rotateX(180deg);
                  -webkit-transform: rotateX(180deg);
                }
                50% {
                    transform: rotateZ(-180deg);
                    -webkit-transform: rotateZ(-180deg);
                }
                75% {
                    transform: rotateY(180deg);
                    -webkit-transform: rotateY(180deg);
                }
            }