body{font-family:sans-serif}.box3d{--unit:12rem;--shadow:30px;width:var(--unit);height:calc(calc(var(--unit) / 3) * 4);margin:calc(var(--unit) / 8) calc(var(--unit) / 4);perspective:calc(calc(var(--unit) / 3) * 4)}.box{width:var(--unit);height:calc(calc(var(--unit) / 3) * 4);position:relative;transform-style:preserve-3d;transform:rotateX(var(--x,var(--x-default))) rotateY(var(--y,var(--y-default))) translateZ(var(--z,var(--z-default)));transition:transform 1s}.box3d .box:hover{--x:0;--y:0;--z:20px}.box__face{position:absolute;font-size:calc(var(--unit) / 10);border-width:var(--border,0);border-style:solid;border-color:var(--border-color,transparent)}.box__face--front,.box__face--back{width:var(--unit);height:calc(calc(var(--unit) / 3) * 4)}.box__face--right,.box__face--left{width:calc(var(--unit) / 3);height:calc(calc(var(--unit) / 3) * 4);left:calc(var(--unit) / 3)}.box__face--top,.box__face--bottom{width:var(--unit);height:calc(var(--unit) / 3);top:calc(var(--unit) / 6)}.box__face--bottom{box-shadow:0 0 var(--shadow) rgba(0,0,0,0.5)}.box__face--front{background-color:var(--bg-color);transform:rotateY(0) translateZ(calc(var(--unit) / 6))}.box__face--back{background-color:var(--bg-color);transform:rotateY(180deg) translateZ(calc(var(--unit) / 6))}.box__face--right{background-color:var(--bg-color);transform:rotateY(90deg) translateZ(calc(var(--unit) / 2))}.box__face--left{background-color:var(--bg-color);transform:rotateY(-90deg) translateZ(calc(var(--unit) / 2))}.box__face--top{background-color:var(--bg-color);transform:rotateX(90deg) translateZ(calc(var(--unit) / 3))}.box__face--bottom{background-color:var(--bg-color);transform:rotateX(-90deg) translateZ(var(--unit))}label{margin-right:10px}