.viewport{padding:200px;-webkit-perspective:4800px;perspective:4800px;-webkit-perspective-origin:50%;perspective-origin:50%}.cube,.viewport{width:400px;height:400px}.cube{position:relative;margin:0 auto;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.cube>.side{position:absolute;height:400px;width:400px;background-color:#444;background-image:url(../images/faces.png);background-size:1600px 1200px;overflow:hidden;touch-callout:none}@media screen and (-webkit-min-device-pixel-ratio:1.5),screen and (min-resolution:1.5dppx){.cube>.side{background-image:url(../images/faces@2x.png)}}.cube>.side>*{z-index:1}.cube>.side>.overlay{position:absolute;z-index:0;top:0;left:0;width:1600px;height:1200px}.cube>.side:first-child{background-position:0 0;-webkit-transform:rotateX(90deg) translateZ(200px) rotate(90deg);transform:rotateX(90deg) translateZ(200px) rotate(90deg)}.cube>.side:first-child > .overlay{margin-top:0;margin-left:0}.cube>.side:nth-child(2){background-position:0 -400px;-webkit-transform:rotateY(-90deg) translateZ(200px);transform:rotateY(-90deg) translateZ(200px)}.cube>.side:nth-child(2)>.overlay{margin-top:-400px;margin-left:0}.cube>.side:nth-child(3){background-position:-400px -400px;-webkit-transform:translateZ(200px);transform:translateZ(200px)}.cube>.side:nth-child(3)>.overlay{margin-top:-400px;margin-left:-400px}.cube>.side:nth-child(4){background-position:-800px -400px;-webkit-transform:rotateY(90deg) translateZ(200px);transform:rotateY(90deg) translateZ(200px)}.cube>.side:nth-child(4)>.overlay{margin-top:-400px;margin-left:-800px}.cube>.side:nth-child(5){background-position:-1200px -400px;-webkit-transform:rotateY(180deg) translateZ(200px);transform:rotateY(180deg) translateZ(200px)}.cube>.side:nth-child(5)>.overlay{margin-top:-400px;margin-left:-1200px}.cube>.side:nth-child(6){background-position:-1200px -800px;-webkit-transform:rotateX(-90deg) rotate(180deg) translateZ(200px);transform:rotateX(-90deg) rotate(180deg) translateZ(200px)}.cube>.side:nth-child(6)>.overlay{margin-top:-800px;margin-left:-1200px}