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

Avec la Firefly, Nio espère concurrencer les citadines électriques européennes

12:00

• 25


Apple Watch : retour sur 10 ans de succès et d'échecs

10:09

• 13


Kwack fait cancaner le Mac à chaque fois que vous appuyez sur une touche de clavier

09:14

• 21


Un humanoïde boucle le semi-marathon de Pékin en 2h40

20/04/2025 à 19:05

• 18


Incogni : la vie privée, enfin prise au sérieux (par quelqu’un d’autre que vous) 📍

20/04/2025 à 14:00

• 0


À la découverte de l’écosystème UniFi, l’équipement réseau des pros accessible au grand public

20/04/2025 à 10:00

• 73


Promo : les prix des MacBook Air M4 et MacBook Pro M4 continuent de baisser - jusqu'à 10 % de remise ! 🆕

19/04/2025 à 15:56

• 10


Sortie de veille : le futur de l’iPad se trouve-t-il dans le Mac ?

19/04/2025 à 08:00

• 20


Quand Apple a sorti... une molaire

18/04/2025 à 22:15

• 54


Redonnez vie à vos photos floues : l'IA d’Aiarty passe à la vitesse supérieure 📍

18/04/2025 à 22:01

• 0


Clap de fin pour Mythic Quest, qui voit son épisode final modifié pour mieux clore la série

18/04/2025 à 21:30

• 33


Un support pour Mac mini M4 qui en bouche un coin(-coin)

18/04/2025 à 20:45

• 50


Choosy permet de choisir un navigateur web différent en fonction du lien à ouvrir

18/04/2025 à 18:00

• 19


Doom, Mario, Civilization : les IA génératives peuvent-elles terminer des jeux des années 90 ?

18/04/2025 à 17:30

• 11


Les agences immobilières peuvent intégrer DossierFacile sur leur site

18/04/2025 à 15:04

• 9


Assistant d’évaluation : un rapport de bug peut servir à entraîner Apple Intelligence

18/04/2025 à 12:43

• 4