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

Les promos Apple s’emballent : iPhone et iPad (Pro) et Apple Watch Ultra 2 à prix cassés

09:03

• 7


Fin de Windows 10 : notre nouvelle série sur le Club iGen pour surmonter cette épreuve

08:05

• 8


Fin de Windows 10 : une transition vers Windows 11 qui vire au fiasco

08:00

• 15


Tests, série, analyses… Les articles du Club iGen publiés en octobre

01/11/2025 à 15:00

• 3


Sortie de veille : comment Apple bat de nouveaux records financiers

01/11/2025 à 08:00

• 15


Sam Altman, frustré, annule sa commande de Tesla Roadster et se prend un mur

31/10/2025 à 21:00

• 131


Votre iPhone 18 Pro, vous le prendrez plutôt café, violet ou bordeaux ?

31/10/2025 à 17:13

• 57


Cette extension pour Chrome reprend une idée populaire d’Arc pour changer d’onglet

31/10/2025 à 15:20

• 7


Le gouvernement américain voudrait bannir TP-Link pour des raisons de sécurité nationale

31/10/2025 à 11:30

• 26


Le Black Friday a déjà commencé chez Boulanger, qui autorise les retours jusqu’au 31 janvier

31/10/2025 à 10:31

• 5


Attention aux tentatives d'arnaques en lien avec les données volées à Bouygues Telecom

31/10/2025 à 10:19

• 38


iOS 26.1, nouveau matériel : que nous réserve le mois de novembre d’Apple ?

31/10/2025 à 10:01

• 33


Bon plan : le MacBook Air M4 avec 24 Go de RAM et SSD 512 Go à 1 347 €

31/10/2025 à 08:44

• 12


iPhone 17 : un succès au-delà des attentes

31/10/2025 à 08:10

• 53


WhatsApp va bientôt débarquer sur l'Apple Watch

31/10/2025 à 07:35

• 45


Apple, le grand retour : 2025 finit bien mieux qu’elle n’avait commencé

30/10/2025 à 22:57

• 31