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.
illustration magazine 25 ans

MacGeneration a 25 ans !

Participez à la fête et découvrez l’histoire de votre site favori en précommandant notre magazine exclusif.

Je précommande le magazine

Sortie de veille : télé Apple et iPhone 17 ultra-fin, des rumeurs folles ou crédibles ?

08:00

• 0


Intrusion informatique, quand une entreprise joue le jeu de la communication ouverte

22/11/2024 à 20:45

• 12


Le SSD de certains MacBook Pro M4 Max atteint presque 11 Go/s

22/11/2024 à 20:30

• 13


Les meilleures promos du Black Friday : AirPods Pro 2, iPad 10, serrure connectée…

22/11/2024 à 18:30

• 10


Test du système mesh Wi-Fi 7 Netgear Orbi 970 : une poignée de mégabits, pour quelques centaines d’euros de plus

22/11/2024 à 17:00

• 9


Décodeur Orange : mise en veille automatique du boitier par le téléviseur

22/11/2024 à 16:30

• 15


macOS 15.2 : Safari dédouble ses fonctions d'import de données

22/11/2024 à 15:02

• 5


Buy Now : un documentaire sur la surconsommation avec le CEO d’iFixit et un ancien d’Apple

22/11/2024 à 12:15

• 68


Protégez votre Mac pour seulement 2,03 €/mois avec CyberGhost VPN : l'offre Black Friday à ne pas manquer ! 📍

22/11/2024 à 11:49


OpenAI envisagerait de lancer un navigateur web

22/11/2024 à 11:15

• 22


Black Friday : le Creative Cloud ainsi que les apps Affinity et DxO jusqu’à - 55 %

22/11/2024 à 10:10

• 13


Palworld est en précommande sur Mac, la sortie repoussée à 2025 🆕

22/11/2024 à 09:47

• 19


Black Friday : de bonnes remises sur les MacBook Pro M3

22/11/2024 à 09:47

• 4


Publicité : l'iPhone 16 Pro décolle à plat grâce à sa puce surpuissante 🆕

22/11/2024 à 09:33

• 14


Le Bitcoin flirte avec les 100 000 $

22/11/2024 à 09:00

• 110


Le vrai nouveau Siri, celui alimenté par une IA générative, ne sortirait pas avant… 2026

22/11/2024 à 08:30