3D CSS

  • A hallway viewed from a center top, 90 degree angle.
    .scene {
      --rotation: 90deg;
      --perspective: 10cm;
    
      perspective: var(--perspective);
      perspective-origin: top center;
    }
    
    .hallway {
      transform-style: preserve-3d;
      rotate: x var(--rotation);
    }
    
    .door, .cliff {
      rotate: x calc(-1 * var(--rotation));
    }

    For more examples, check out this 'lab' site I've created for experimenting with this technique.