#display{pointer-events:none}.container{align-items:center;display:flex;height:600px;justify-content:center;margin:0 auto;padding:0;perspective:5000px;perspective-origin:50% 51%;position:relative;width:100%}.container,.cubes{transform-style:preserve-3d}.cubes{width:300px}.cube{backface-visibility:hidden;display:inline-block;font-weight:600;height:24px;margin:0;pointer-events:none;transform-origin:50%;transition:transform 1.2s ease-in-out,top 1s ease-in,left 1s ease-in;transition-timing-function:ease-in-out;width:24px}.cube,.cube-wrap{float:left;left:0;position:relative;top:0;transform-style:preserve-3d}.cube-wrap{height:25px;transition:transform 1.2s,top 1s ease-in,left 1s ease-in;width:25px}.cube .cube-side{backface-visibility:hidden;background:#000;border-radius:2px;color:#000;display:block;font-size:16px;height:100%;line-height:22px;margin:0;position:absolute;text-align:center;text-transform:uppercase;width:100%}.cube-side-inner{background:#fff;border-radius:2px;height:80%;margin:10%;width:80%}.cube .front{transform:rotateY(0) translateZ(12px)}.cube .back{transform:rotateX(180deg) translateZ(12px)}.cube .right{transform:rotateY(90deg) translateZ(12px)}.cube .left{transform:rotateY(-90deg) translateZ(12px)}.cube .top{transform:rotateX(90deg) translateZ(12px)}.cube .bottom{transform:rotateX(-90deg) translateZ(12px)}.cube.show-front{transform:translateZ(-20px) rotateY(0)}.cube.show-back{transform:translateZ(-20px) rotateX(-180deg)}.cube.show-right{transform:translateZ(-20px) rotateY(-90deg)}.cube.show-left{transform:translateZ(-20px) rotateY(90deg)}.cube.show-top{transform:translateZ(-20px) rotateX(-90deg)}.cube.show-bottom{transform:translateZ(-20px) rotateX(90deg)}