html { display: flex; background: black; --cube-size: 800px; } body { width: var(--cube-size); height: var(--cube-size); margin: auto; transform-style: preserve-3d; animation: how 20s linear infinite; background: transparent; } @keyframes how { from { transform: rotate3d(1, 1, 1, 0turn); } to { transform: rotate3d(1, 1, 1, 1turn); } } #app-mount+*,#app-mount+*+*, #app-mount+*+*+*, #app-mount+*+*+*+*, #app-mount+*+*+*+*+*, #app-mount+*+*+*+*+*+* { display: block; position: absolute; font-size: 0; pointer-events: none; background: -moz-element(#app-mount); inset: 0; opacity: 0.7; } #app-mount+* { transform: translateZ(calc(var(--cube-size)/2)); } #app-mount+*+* { transform: rotateY(-90deg) translateZ(calc(var(--cube-size)/2)); } #app-mount+*+*+* { transform: rotateY(90deg) translateZ(calc(var(--cube-size)/2)); } #app-mount+*+*+*+* { transform: translateZ(calc(var(--cube-size)/-2)); } #app-mount+*+*+*+*+* { transform: rotateX(90deg) translateZ(calc(var(--cube-size)/2)); } #app-mount+*+*+*+*+*+* { transform: rotateX(-90deg) translateZ(calc(var(--cube-size)/2)); } .drag-previewer, .drag-announcer { pointer-events: none; }