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 Intelligence dispo en France : toutes les nouvelles fonctions pour votre iPhone et votre Mac

31/03/2025 à 19:27

• 52


macOS 15.4 est disponible avec Apple Intelligence et les catégories dans Mail

31/03/2025 à 19:12

• 27


Adobe Substance 3D Painter abandonne les Mac Intel

31/03/2025 à 18:30

• 2


Ventes flash : un SSD externe 4 To autour de 200 € et d'autres bons plans sur le stockage

31/03/2025 à 18:23

• 31


Sauvegardez vos données avant qu’il ne soit trop tard

31/03/2025 à 17:30

• 27


Il va devenir de plus en plus compliqué de configurer Windows 11 sans compte Microsoft

31/03/2025 à 17:00

• 68


Fibre : Bouygues Telecom passe son Wi-Fi à la vitesse supérieure… ainsi que ses prix

31/03/2025 à 16:00

• 36


Comme prévu, l’ADSL est coupé aujourd’hui dans le centre-ville de Rennes

31/03/2025 à 14:17

• 65


Encadrement du pistage : Apple écope d’une amende de 150 millions d’euros pour abus de position dominante

31/03/2025 à 12:46

• 53


Promo : le Mac mini M4 avec 512 Go de stockage à 812 € au lieu de 949

31/03/2025 à 11:28

• 10


Guillaume Gete organise un séminaire de deux jours à Paris pour les gestionnaires de parcs Apple

31/03/2025 à 08:17

• 12


Synchronisez et sécurisez vos appareils Apple avec QNAP (Qsync & MyQNAPcloud Storage)📍

31/03/2025 à 08:00


iOS 18.4 : Google Maps peut remplacer Plans comme app par défaut

31/03/2025 à 07:28

• 64


L’app santé dopée à l’IA et les prochains produits M5 : la semaine Apple

30/03/2025 à 20:00

• 44


Faux mails : le guide pour sécuriser vos données 📍

30/03/2025 à 11:47


Sauvegarde en ligne : peut-on trouver mieux que Backblaze en 2025 ?

30/03/2025 à 10:00

• 53