.css3-cube-wrapper{perspective:1000px;width:100px;height:100px}.css3-cube-wrapper .css3-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s}.css3-cube-wrapper .css3-cube .cube-face{position:absolute;height:100%;width:100%;border:1px solid grey}.css3-cube-wrapper .css3-cube .cube-face:after{position:absolute;top:50%;transform:translateY(-50%);width:100%;text-align:center;content:attr(data-face)}.css3-cube-wrapper .css3-cube .cube-face[data-face="front"]{transform:rotateY(0) translateZ(50px);background-color:rgba(255,0,0,0.5)}.css3-cube-wrapper .css3-cube .cube-face[data-face="right"]{transform:rotateY(90deg) translateZ(50px);background-color:rgba(0,128,0,0.5)}.css3-cube-wrapper .css3-cube .cube-face[data-face="back"]{transform:rotateY(180deg) translateZ(50px);background-color:rgba(0,0,255,0.5)}.css3-cube-wrapper .css3-cube .cube-face[data-face="left"]{transform:rotateY(-90deg) translateZ(50px);background-color:rgba(255,255,0,0.5)}.css3-cube-wrapper .css3-cube .cube-face[data-face="top"]{transform:rotateX(90deg) translateZ(50px);background-color:rgba(128,0,128,0.5)}.css3-cube-wrapper .css3-cube .cube-face[data-face="bottom"]{transform:rotateX(-90deg) translateZ(50px);background-color:rgba(0,0,0,0.5)}