[Article] Les transformations 3D en CSS3

[ornitho13]

Bonsoir à tous,

voici un article expliquant les transformations 3D en CSS3. Vous apprendrez également à faire un cube, un flip card, etc...
Munissez vous d'un navigateur Safari afin de pouvoir profiter des démos.

Comme d'habitude, n'hésitez pas à faire part de vos remarques et questions à la suite de ce message.

Les transformations 3D en CSS3

Merci!

[mekal]

tres tres intéressant je ne pensait que safari etait deja capable de faire du css3d en tout cas le faire en css avec possibilité d'interagir avec le javascript sa promet

apparemment selon ce que j'ai lu au niveau de la feuille de route de Firefox sa devrait être mis en place dans le courant de l'année

en tout cas le tuto est claire et precis; et félicitation pour les demos

[ornitho13]

C'est plutôt une bonne nouvelle concernant Firefox, j'espère que les autres navigateurs feront de même!

[Bovino]

Merci pour cet article !

Les exemples à la fin sont assez impressionnants !

[Marc22]

C'est super. Ce ne serait plus la peine de passer du temps sur photoshop pour faire vite fait quelques effets.

Mais parfois je me demande si c'est vraiment un gain de temps sachant qu'il faudra gérer les exceptions des autre "gros" navigateurs du marché. Genre IE.

IE ne gère toujours pas les ombrages, les dégradés, de la même façon que chrome ou firefox. Il faut passer par des sortes de patch qui au final laisse des grosses différences d'affichages.

Autre exemple, je crois que seul firefox gère le multi-dégradés, on peut faire 3 dégradés successifs sur firefox mais pas sur chrome. Mais sur chrome on peut gérer l'angle de dégradé radial et pas sur firefox... Bref. Tant que ce n'est pas uniformisé, c'est pas la peine.

[mekal]

sa ma tellement inspirer que j'ai realisé un cahier avoir a cette endroit

[ornitho13]

Sympa comme exemple

Concernant la compatibilité des navigateurs, Chrome 12 (Chrome Canari dans sa version 12 pour l'instant) permet le rendu 3D en CSS3.
Sous windows XP, il faudra ajouter l'argument :

Code :

1
2
"C:\Documents and Settings\----\Local Settings\Application Data\Google\Chrome SxS\Application\chrome.exe"  --ignore-gpu-blacklist

En effet Chrome a enlevé le support WebGL par défaut sous XP (et cela depuis la version 10) :
http://www.google.com/support/forum/...3379b1a2&hl=en

[Zboyle]

Bonjour,

Ce tutoriel est magnifique, vraiment ! Et je remercie ornitho13 pour son tutoriel

Le problème, c'est que ce n'est compatible que sur safari qui est l'un des navigateurs les moins utilisés.

Alors voila, n'y aurait il pas une autre solution qui permettrait le même rendu mais sur tout les navigateurs ? Avec que du javascript peut être ?

Merci de vos réponses

[mekal]

fonctionne maitenant avec firefox 10 et une precision au sujet de l'attribut perspective il faut mettre (px) pour que firefox accepte la perspective

Code :

1
2
-webkit-perspective: 1200px;
	-moz-perspective: 1200px;