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

Réduction rare sur le Magic Keyboard USB-C Touch ID avec pavé numérique 🆕

04:31

• 32


Apple Store : des cartes cadeaux, mais pas de réduction sur les prix des produits Apple

01:02

• 2


Black Friday Fnac : le MacBook Air M4 à 899 € (+80 € en chèques-cadeaux) et jusqu'à 240 € offerts sur l'iPhone 17 Pro Max

00:13

• 13


Pour ChatGPT, donner l’heure reste plus compliqué que de disserter sur la physique quantique

27/11/2025 à 22:15

• 24


Êtes-vous déjà passé à macOS Tahoe 26 ?

27/11/2025 à 22:00

• 38


Jusqu'à - 50 % chez ShopSystem : les coques iPhone les plus fines au monde ! 📍

27/11/2025 à 21:24

• 0


L’UE pourrait pousser Apple à reprendre son projet de surveillance des contenus pédopornographiques

27/11/2025 à 21:15

• 24


Test d'un adaptateur USB-C vers Ethernet à 10 Gb/s : des compromis pour un petit prix

27/11/2025 à 20:30

• 5


Ecrans 4K/5K : les meilleures offres BenQ

27/11/2025 à 20:29

• 0


C'est (vraiment) le moment de renouveler votre abonnement Microsoft Office 365, grâce au Black Friday 🆕

27/11/2025 à 19:05

• 33


L'Europe veut interdire les réseaux sociaux aux moins de 16 ans

27/11/2025 à 18:20

• 90


Black Friday : notre récap des meilleures offres (AirPods, Hue, MacBook…)

27/11/2025 à 18:11

• 10


Terminal : mises à jour majeures pour mas, la ligne de commande officieuse du Mac App Store

27/11/2025 à 18:00

• 1


Plex commence à bloquer l’accès distant gratuit et le Plex Pass est justement en promo pour le Black Friday

27/11/2025 à 16:05

• 78


Apple diffuse sa traditionnelle vidéo des fêtes, tournée à l’iPhone 17 Pro bien sûr

27/11/2025 à 15:21

• 10


Black Friday : -36 % sur Aiarty, l'IA qui convertit vos vidéos en 4K sans les dénaturer 📍

27/11/2025 à 14:00

• 0