*{box-sizing:border-box}:root{--size: 20}body{align-items:center;background:#d5aaff;display:flex;justify-content:center;min-height:100vh}.cube{height:calc(var(--size) * 1vh);position:relative;transform-style:preserve-3d;width:calc(var(--size) * 1vh);transform:rotateY(-45deg)}.cube__wrapper{transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(-35deg);position:absolute;top:50%;left:50%}.cube__wrapper:nth-of-type(2){display:none}.cube__wrapper:nth-of-type(2) .cube__panel--left{transform:rotateX(-270deg)}.cube__wrapper:nth-of-type(2) .cube__panel--right{transform:rotateY(270deg)}.cube__wrapper:nth-of-type(2) .cube__panel--top{transform:rotateY(-270deg)}.cube__panel{background:#d5aaff;height:100%;width:100%;border:10px solid #000;position:absolute}.cube__panel--left{transform-origin:bottom}.cube__panel--top{transform-origin:left}.cube__panel--right{transform-origin:right}.cube__panel--fake{display:none}.cube__panel-wrap{height:100%;width:100%;position:absolute;transform-style:preserve-3d}.cube__panel-wrap--left{transform-origin:bottom;transform:rotateX(0) translateZ(calc((var(--size) / 2) * 1vh)) rotateX(0)}.cube__panel-wrap--top{transform-origin:left;transform:rotateX(90deg) translateZ(calc((var(--size) / 2) * 1vh)) rotateY(0)}.cube__panel-wrap--right{transform-origin:right;transform:rotateY(90deg) translate3d(calc((var(--size) / 2) * 1vh),0,0) rotateY(0)}