Ouvrir le menu principal

MacGeneration

Recherche

Du CSS pour faire de la 3D

Arnaud de la Grandière

mardi 09 février 2010 à 11:58 • 28

Ailleurs

skitched


Parce qu'il n'y a pas que le JavaScript dans la vie, Román Cortés a réussi à tirer d'impressionnants résultats de CSS de niveau 1 et 2.1, et HTML, juste en exploitant leurs fonctions à des fins originales. Il a réalisé quelques démos basées sur son implémentation de displacement maps sans la moindre ligne de JavaScript. Le résultat est assez saisissant : une cannette de coca qui roule sur elle-même avec un effet de simili 3D, la même après écrasage, un prisme semi-transparent qui déforme l'arrière plan vu à travers, un tableau de Van Gogh qui prend vie, un effet de transition "rideaux vénitiens", rien qu'en faisant défiler les ascenseurs de la fenêtre, sans mettre à genoux votre machine, et le tout fonctionne quasiment sur tous les navigateurs (y compris sur l'iPhone, veillez cependant à provoquer le défilement avec deux doigts à l'intérieur de la zone active). On peut trouver de nombreux autres effets assez impressionnants sur le blog de Román Cortés.

skitchedLes displacement maps, souvent utilisées en 3D, sont des images en niveaux de gris qui permettent d'indiquer à un moteur de rendu comment déplacer des pixels localement, sans affecter la géométrie de l'objet sur lequel elles sont appliquées. La méthode permet un rendu plus détaillé sans ajouter de polygones aux modèles, ce qui est plus efficace tant en gestion mémoire qu'en vitesse d'exécution. On s'en sert également pour les objets translucides pour affecter la réfraction de la lumière à travers.

Soutenez MacGeneration sur Tipeee

MacGeneration a besoin de vous

Vous pouvez nous aider en vous abonnant ou en nous laissant un pourboire

Soutenez MacGeneration sur Tipeee

Nos coups de cœur et nos coups de gueule 2025

10:00

• 30


Magazine des 25 ans de MacGeneration : dernier week-end pour passer commande !

08:40

• 11


Sortie de veille : les départs en cascade chez Apple, mauvaise nouvelle ou chance inespérée ?

08:00

• 12


Promo : le MacBook Air M4 256 Go de retour à 874 € ! 🆕

05/12/2025 à 23:59

• 5


Les MacBook Pro M5 Pro, le MacBook A18 et les iPad/iPhone entrée de gamme dès janvier ?

05/12/2025 à 21:45

• 37


Promos : des AirPods 4 à 84 € et le pack de 4 AirTags à 65 € ! Des prix inédits en France

05/12/2025 à 21:39

• 5


Des MacBook Pro 14" comme neufs à moins de 900 € !

05/12/2025 à 21:19

• 0


Nouvelles spéculations sur la succession de Tim Cook… et sur sa santé

05/12/2025 à 17:55

• 46


X sanctionné par Bruxelles : amende de 120 millions d’euros pour non-respect du DSA

05/12/2025 à 16:13

• 44


Qu'utilisez-vous comme enceinte(s) sur votre bureau avec votre Mac ?

05/12/2025 à 15:05

• 132


Netflix achète les studios, films et séries de Warner Bros. et HBO pour 82,7 milliards de dollars 🆕

05/12/2025 à 13:46

• 92


30 % de réduction sur un écran OLED 4K LG de 32 pouces

05/12/2025 à 13:00

• 1


La Model 3 Standard est techniquement la voiture la moins chère jamais proposée par Tesla

05/12/2025 à 11:53

• 93


Une hausse des prix des Mac et des iPhone est-elle inévitable ?

05/12/2025 à 11:29

• 35


Pour tester le MTE, une nouvelle fonction de ses processeurs, Apple a créé un Rosetta « ARM »

05/12/2025 à 11:00

• 6


C’est reparti pour un tour : Cloudflare (et Downdetector 🙃) ont été en panne 🆕

05/12/2025 à 10:04

• 27