[CSS 3] Les transformations 2D en CSS3 [Article]

[ornitho13]

Bonjour a tous,

Voici un article sur les transformations 2D en CSS3 via la propriété transform.
N'hésitez pas à faire part de vos remarques et questions à la suite de ce message.

Les transformations en CSS3

Merci.

[Marc22]

Merci

[Bovino]

Envoyé par Marc22

Merci

Entièrement d'accord !

Encore une excellente synthèse, claire, concise et compréhensible
Vivement le suivant

Ben oui, faut pas nous habituer, sinon, on en redemande !

[jpvincent]

Je ne l'ai vu nul part donc j'imagine que ça ne doit pas être possible : est ce qu'il est possible d'obtenir une déformation où un côté serait plus grand que l'autre, pour donner un effet de profondeur, genre :

Code :

1
2
3
4
5
6
7
 
|\
| \
|  |
|  |
| /
|/

[ornitho13]

oui cela est possible mais fera l'objet d'un autre article:
Les transformations 3D en CSS3 (que j'écrirai pour le mois prochain a priori)

[Joseph_K]

Bonjour Jérôme Debray.

Sur ma page, je fais des rotations en CSS3 à des liens qui ne fonctionnent que avec Mozilla Firefox et pas avec Chrome ou Safari (en général c'est plutôt le contraire...)

Voici le code CSS3 des liens et du .hover :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
#article-3 li a {
  	color: grey;
	-webkit-transition: 2s ease-in;
  	-moz-transition: 2s ease-in;
  	-o-transition: 2s ease-in;
}
 
#article-3 li:hover a {
  	color: black;
  	text-shadow: 0.1em 0.1em 0.2em grey;
  	-webkit-transform: rotate(360deg);
  	-moz-transform: rotate(360deg);
  	-o-transform: rotate(360deg);
 
  	-webkit-transition: 1s ease-in;
  	-moz-transition: 1s ease-in;
  	-o-transition: 1s ease-in;
}

Merci pour votre aide !

Sam

[artenis]

La forme de trapeze est réalisable avec :

Code :

-webkit-transform:perspective(600) rotateY(45deg) ;

je crois bien que c'est Jérôme Debray qui en parle

seulement elle n'est valable a ce jour que sur (webkit: chrome et safari)

moi même je cherche a savoir s'il est possible de contourner le compatibilité navigateur pour firefox, opera et IE9 (et surtout savoir si ceux-ci vont adopter cette propriété

voici mon post:
http://www.developpez.net/forums/d11...m-perspective/