.scene{perspective:1000px;display:flex;align-items:center;justify-content:center}.figure{position:relative;transition:transform .5s}.cube,.figure{transform-style:preserve-3d}.cube,.cube__face{position:absolute}.cube__face{width:30px;height:30px;border:1px solid hsl(var(--foreground)/.4);background:hsl(var(--secondary))}.cube__face--front{transform:rotateY(0deg) translateZ(15px)}.cube__face--back{transform:rotateY(180deg) translateZ(15px)}.cube__face--right{transform:rotateY(90deg) translateZ(15px)}.cube__face--left{transform:rotateY(-90deg) translateZ(15px)}.cube__face--top{transform:rotateX(90deg) translateZ(15px)}.cube__face--bottom{transform:rotateX(-90deg) translateZ(15px)}