:root {
  --perspective: 1000px;
  
  --camera-dolly: 20px;
  --camera-pedestal: 20px;
  --camera-truck: 20px;
  
  --camera-pan: 0deg;
  --camera-tilt: 0deg;
  --camera-roll: 0degx;
}

body {
  background-color: #111;
  color:white;
  overflow: hidden;
  perspective:800px;
  transform-style: preserve-3d;
  perspective-origin: 50% 50%;
}

.scene {
  transform:
    translateZ(var(--perspective))
    
    translateX(calc(var(--camera-truck, 0) * -1))
    translateY(var(--camera-pedestal, 0))
    translateZ(calc(var(--camera-dolly,0 ) * -1))
    
    rotateX(var(--camera-roll))
    rotateY(var(--camera-pan))
    rotateZ(var(--camera-tilt))
    
    translateZ(calc(var(--perspective, 0) * -1))
  ;
}



.box {
  width: 200px; 
  height: 200px;
  background-color: green;
  
  animation: rotate 10s infinite linear;
}
  @keyframes rotate {
    to { transform: rotateY(360deg); }
  }

.box-face {
  position:absolute;
  inset:0;
  background-color:white;
  opacity:0.6;
  
}

.box-face:nth-child(1) { transform: translateZ(100px); }