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.

Rejoignez le Club iGen

Soutenez le travail d'une rédaction indépendante.

Rejoignez la plus grande communauté Apple francophone !

S'abonner

Apple envisage de remplacer le moteur de Siri par celui de ChatGPT ou Claude AI

30/06/2025 à 23:00

• 27


Comment faire face à la déferlante des fausses alertes bancaires et colis frauduleux 📍

30/06/2025 à 20:44

• 0


Pixelmator Pro s’enrichit de certaines fonctions Apple Intelligence

30/06/2025 à 20:09

• 6


L'option Lieux visités d'iOS 26 serait absente en Europe

30/06/2025 à 19:49

• 125


MacBook : jusqu’où Apple ira-t-elle pour casser les prix ?

30/06/2025 à 19:40

• 11


Un MacBook avec une puce A18 Pro repéré dans du code d’Apple

30/06/2025 à 17:36

• 31


Proton Pass ne se limite plus aux mots de passe

30/06/2025 à 15:04

• 17


Le MacBook Air M2 de retour à 749 € et 30 € de cash back !

30/06/2025 à 13:27

• 11


« F1 » : un démarrage en trombe au box-office et déjà un goût de victoire pour Apple

30/06/2025 à 13:15

• 34


Evoluent jette l'éponge pour les pilotes Mac de ses souris ergonomiques

30/06/2025 à 11:43

• 24


Extensions Safari : Apple lève une barrière majeure pour les développeurs

30/06/2025 à 11:13

• 6


Vision Pro, Vision Air et lunettes connectées : Ming-Chi Kuo dévoile le programme d’Apple jusqu’en 2029

30/06/2025 à 08:48

• 11


Apple lancerait en 2026 un MacBook avec un processeur d'iPhone

30/06/2025 à 08:12

• 111


Et si Apple sortait un anneau connecté, pour relancer ses wearables ? La semaine Apple

29/06/2025 à 21:00

• 24


Comment les aspirateurs robots Matter prennent leurs quartiers dans la Maison d’Apple

29/06/2025 à 18:38

• 11


Le grand tapis de souris Logitech en promotion à 6,99 € au lieu de 22 €

29/06/2025 à 08:22

• 17