[résolu]Trapèze en CSS3

Bonjour .

Je voudrais coder un cube en CSS3 qui tourne, sans canvas, et pas qu'avec webkit. avec Transform de CSS3, du JS, et pas mal de trigo.

J'ai beau solliciter l'ami google, je ne trouve pas comment faire un trapèze ( pour les perspectives ).

Est-ce seulement possible ?

EDIT: Mon autisme l'emportera sur la raison pour aller au bout de ce defie absurde, et j'utiliserais au pire des elements composites ( superposition de 2 divs )
Modifié par NaN (12 May 2011 - 12:29)

Pourquoi ne pas utiliser SVG ? C'est fait pour.

Déjà fait...
défie intellectuel, du temps à perdre ...

Bon, selon mes recherches, deux solutions:
-Ne coder que pour webkit ( pour l'instant ).
-utiliser les border ( c'est même pas du CSS3 ), Il est cependant impossible ( dites moi si je me trompe, ce serait avec grand plaisir ! ) d’intégrer du contenu ...

Hello,
Tout d'abord sache que les transformations 3D CSS3 ne sont compatibles que sous Safari. Chrome 12, firefox 5 et ie10 l’implémenteront également.

Cependant, pour faire ce que tu veux, inutile de créer des "trapèzes" pour la perspective. Il suffit d'utiliser les règles:

perspective:500; /*accentuation de la perspective*/
transform-style:preserve-3d; /* gestion de la 3d*/

En utilisant les préfixes propriétaires qui vont bien.

Donc, en gros, pour un cube, 6 div et le tour est joué!

Bon, vu que c'est dans les spé CSS3 je vais le faire comme ça.
Merci !