.wrap {
                height:100px;
                width:100px;
                margin-left:550px;
                margin-top: -450px;
                -webkit-perspective: 1000px;
                -webkit-perspective-origin: 50% 50%;
            }
            @-webkit-keyframes bganim {
                from {
                    background-position: 0px;
                }

                to {
                    background-position: 80px;
                }
            }
            .cube {
                margin-top:auto;
                position: relative;
                height: 100px;
                width: 100px;
                -webkit-transform-style: preserve-3d;
            }
            .cube div {  
                    position: absolute;
                    padding-top: 5px;
                    box-sizing: border-box;
                    height: 100%;
                    width: 100%;
                    opacity: 1.0;
                    background-color:grey;
                    border: solid 1px #fff;
                    color: #fff;
                    font: 10px arial;
                    -webkit-transition: transform 0.2s ease-in;
                }
            .front { 
                -webkit-transform: translateZ(80px);
            }
            .back {
                -webkit-transform: translateZ(-100px) rotateY(180deg);
            }
            .right {
                -webkit-transform: rotateY(-270deg) translateX(100px);
                -webkit-transform-origin: top right;
            }
            .left {
                -webkit-transform: rotateY(270deg) translateX(-100px);
                -webkit-transform-origin: center left;
            }
            .top {
                -webkit-transform: rotateX(-270deg) translateY(-100px);
                -webkit-transform-origin: top center;
            }
            .bottom {
                -webkit-transform: rotateX(270deg) translateY(100px);
                -webkit-transform-origin: bottom center;
            }
            @-webkit-keyframes rotate {
                from {
                    -webkit-transform: rotateX(0deg) rotateY(0deg);
                }
                to {
                    -webkit-transform: rotateX(360deg) rotateY(360deg);
                }      
            }    
            .cube {
                -webkit-animation: rotate 20s infinite linear;
            }
            .wrap:hover .front {
                -webkit-transform: translateZ(200px);
            }
            .wrap:hover .back {
                -webkit-transform: translateZ(-200px) rotateY(180deg);
            }
            .wrap:hover .right {
                -webkit-transform: rotateY(-270deg) translateZ(100px) translateX(100px);
            }
            .wrap:hover .left {
                -webkit-transform: rotateY(270deg) translateZ(100px) translateX(-100px);
            }
            .wrap:hover .top {
                -webkit-transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
            }
            .wrap:hover .bottom {
                -webkit-transform: rotateX(270deg) translateZ(100px) translateY(100px);
            }
 .wrap {
                height:200px;
                width:200px;
                margin-left:550px;
                margin-top: -450px;
                perspective: 1000px;
                perspective-origin: 50% 50%;
            }
            @keyframes bganim {
                from {
                    background-position: 0px;
                }

                to {
                    background-position: 80px;
                }
            }
            .cube {
                margin-top:auto;
                position: relative;
                height: 180px;
                width: 180px;
                transform-style: preserve-3d;
            }
            .cube div {  
                    position: absolute;
                    padding-top: 5px;
                    box-sizing: border-box;
                    height: 100%;
                    width: 100%;
                    opacity: 1.0;
                    background-color:grey;
                    border: solid 1px #fff;
                    color: #fff;
                    font: 10px arial;
                    transition: transform 0.2s ease-in;
                }
            .front {
                transform: translateZ(80px);
            }
            .back {
                transform: translateZ(-100px) rotateY(180deg);
            }
            .right {
                transform: rotateY(-270deg) translateX(100px);
                transform-origin: top right;
            }
            .left {
                transform: rotateY(270deg) translateX(-100px);
                transform-origin: center left;
            }
            .top {
                transform: rotateX(-270deg) translateY(-100px);
                transform-origin: top center;
            }
            .bottom {
                transform: rotateX(270deg) translateY(100px);
                transform-origin: bottom center;
            } 
            @keyframes rotate {
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }
                to {
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
            .cube {
                animation: rotate 20s infinite linear;
            }
            .wrap:hover .front {
                transform: translateZ(200px);
            }
            .wrap:hover .back {
                transform: translateZ(-200px) rotateY(180deg);
            }
            .wrap:hover .right {
                transform: rotateY(-270deg) translateZ(100px) translateX(100px);
            }
            .wrap:hover .left {
                transform: rotateY(270deg) translateZ(100px) translateX(-100px);
            }
            .wrap:hover .top {
                transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
            }
            .wrap:hover .bottom {
                transform: rotateX(270deg) translateZ(100px) translateY(100px);
            }