Laptop 3D

What you need to know

• One variable for the scale. --l3d-largeur drives everything, perspective included: the enlargement is uniform, the scene does not distort.
• The screen is not an image. The .l3d__ecran block is drawn at 864 × 531 px before projection; put your own page in it and its links stay clickable and focusable.
• The lid opens as you scroll. The data-l3d-scroll attribute has the angle driven by the position in the viewport; without it, the lid springs open when it enters the viewport. The script writes a single number, --l3d-progression, and the CSS derives the angle from it.
• You can grab it and turn it. With the pointer, a finger or the arrow keys. The grab never starts on the panel: the screen's text stays selectable and its links clickable.
• Without JavaScript, the laptop is displayed open, screen lit, at the measured angle: never a degraded state.
• The parts stay in transform-style: flat. Giving them preserve-3d would sort the panel separately from the lid, and the bezel would vanish across its lower third.