.cube-container{width:40px;height:40px;perspective:120px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:translateZ(-20px);transition:transform 1s ease}.cube__face{position:absolute;width:40px;height:40px;border:1px solid black;transition:filter 1s ease;filter:blur(1px)}.cube__face--front{transform:rotateY(0) translateZ(20px)}.cube__face--right{transform:rotateY(90deg) translateZ(20px)}.cube__face--back{transform:rotateY(180deg) translateZ(20px)}.cube__face--left{transform:rotateY(-90deg) translateZ(20px)}.cube__face--top{transform:rotateX(90deg) translateZ(20px)}.cube__face--bottom{transform:rotateX(-90deg) translateZ(20px)}.cube.show-front{transform:translateZ(-20px) rotateY(0)}.cube.show-front .cube__face--front{filter:blur(0px)}.cube.show-right{transform:translateZ(-20px) rotateY(-90deg)}.cube.show-right .cube__face--right{filter:blur(0px)}.cube.show-back{transform:translateZ(-20px) rotateY(-180deg)}.cube.show-back .cube__face--back{filter:blur(0px)}.cube.show-left{transform:translateZ(-20px) rotateY(90deg)}.cube.show-left .cube__face--left{filter:blur(0px)}.cube.show-top{transform:translateZ(-20px) rotateX(-90deg)}.cube.show-top .cube__face--top{filter:blur(0px)}.cube.show-bottom{transform:translateZ(-20px) rotateX(90deg)}.cube.show-bottom .cube__face--bottom{filter:blur(0px)}