Portátil 3D — Remastered (CSS)

Arrastra para girar · rueda para acercar · clic en la tapa para abrirla o cerrarla · pulsa teclas de tu teclado

Controles

Tapa 105° Giro automático Iluminar la tecla que pulso Retroiluminación

~650 → 143 líneas: Las 108 teclas eran 108 bloques CSS casi idénticos. Ahora son datos en src/keyboard-layout.js, con las coordenadas exactas del original.
RGB con 1 elemento animado, no 108: Cada tecla lleva su tono fijo y lo único que se anima es un hue-rotate sobre el contenedor: un filtro de GPU sobre una capa. El original animaba box-shadow y text-shadow en las 108 teclas, y ninguna de las dos se compone en GPU.
Una capa, no 108: El teclado es un único plano rotado con las teclas como hijos 2D, así que el navegador lo rasteriza de una vez.
Bisagra de verdad: La tapa colgaba fija; ahora gira sobre el eje y se cierra sobre la base.