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

Le code d'iOS 19 révèle les produits en gestation chez Apple (Mac, iPhone...) pour 2026 et les années à venir !

07:29

• 25


iOS 26.3 bêta 1 : découvrez toutes les nouveautés

06:20

• 7


ONLYOFFICE Desktop Editors 9.2 : l'IA s'invite sur votre Mac (et votre PC) 📍

15/12/2025 à 23:55

• 0


À défaut de CarPlay, le groupe GM va ajouter Apple Music à ses voitures

15/12/2025 à 22:50

• 4


Guide de Noël : bagues, balances, les appareils de suivi de santé les plus utiles sous iOS

15/12/2025 à 21:35

• 8


Les premières bêtas des OS 26.3 sont disponibles, avec le transfert simplifié entre iOS et Android 🆕

15/12/2025 à 20:31

• 20


Comme prévu, Meta abandonne la version Mac de l'app Messenger

15/12/2025 à 19:25

• 25


Deux boîtiers pour SSD capables d'atteindre 40 Gb/s en promotion

15/12/2025 à 16:50

• 8


Apple peut fermer un compte vieux de 25 ans sans recours à cause d’une mauvaise carte cadeau

15/12/2025 à 16:33

• 27


MacBook Air M2 : le modèle 16 Go à 724 €, son plus bas historique ! 🆕

15/12/2025 à 16:19

• 94


La fin des SSD SATA se précise : Samsung aurait abandonné ce marché

15/12/2025 à 15:25

• 25


iOS : Apple cherche toujours à forcer les mises à jour automatiques

15/12/2025 à 12:30

• 68


X arrête son application X pour Mac (qui n'était que l'app iPad mal intégrée)

15/12/2025 à 12:15

• 57


SF Symbols Lite améliore le gestionnaire d’icônes fourni par Apple

15/12/2025 à 11:32

• 3


Beats rend hommage aux films de kung-fu pour vendre ses Powerbeats Pro 2

15/12/2025 à 10:00

• 6


macOS 26.2 déplace les indicateurs de luminosité et volume quand une app s’affiche en plein écran

15/12/2025 à 09:30

• 18