Blog
Wiki
Forums
Fichiers
A propos
Css3 en action avec Firefox 3.1b1pre
Voici une petite vidéo de ce qu'il sera possible de faire avec les CSS3, et, notamment, les transformations proposés par WebKit et border-image.
Pour le déplacement des post-it, j'ai utilisé jquery-ui, j'aurai tout à fait pû utiliser -moz-transform: translate() mais le but était, évidemment, de montrer quelque chose qu'on a pas l'habitude de voir : la rotation et le redimensionnement d'objet en CSS...
Actuellement, la spécification n'est encore qu'un brouillon (ce qui explique l'utilisation du préfixe "-moz-") mais il existe un comportement, qui me semble gênant, ainsi, si on souhaite appliquer une transformation de type rotation ou redimensionnement, il faut passer par le mot-clef Css -moz-transform, édudiez l'exemple suivant :
p {
-moz-transform: rotate(15deg);
-moz-transform: scale(2);
}
Que va-t-il se passer ?
Les élements paragraphes vont subir une transformation de type scale, c'est tout, pas de rotation, le problème est qu'on ne peut pas, pour le moment, définir une transformation sans modifier les autres, ainsi, si une feuille de style externe veut appliquer une rotation à tous les élements p de la page, elle pourra le faire mais en "écrasant" aussi les autres transformations...cela est tout à fait normal à vrai dire, c'est écrit dans la spécification...
Ne serait-il pas judicieux de créer des propriétés transform-rotate, transform-scale, transform-skew...?
- Testez par vous même : http://www.digitalspirit.org/lab/css3/transform.php (Rotation en cliquant sur la punaise, redimensionnement en cliquant en bas à droite du post-it et création de post-it en double cliquant sur la punaise)
- Transformations en CSS3 sur le blog de Laurent Jouanneau
- Explications sur le site de Clochix
Commentaires
Bravo, superbe démo, manque juste la notice. Donc pour re-dimentionner c'est le coin en bas à droite du post-it, pour faire tourner c'est le haut de la punaise, et pour créer un nouveau post-it il faut double-cliquer sur la punaise.
Clochix, tu as raison, la notice est maintenant ajoutée...
Tu sembles avoir mal lu la specification :-p
http://webkit.org/specs/CSSVisualEf... :
> This property contains a list of transform functions.
Autrement dit, si tu veux faire rotate et scale en même temps :
p {
-moz-transform: rotate(15deg) scale(2);
}
Pour ce qui est de l'écrasement d'une valeur par une autre : c'est tout à fait normal, c'est la specification de la SYNTAXE CSS qui veut ça (pas la spec de transform)
Bonjour Laurent,
je n'ai jamais dit qu'il n'était pas possible de faire 2 transformations en même temps, d'ailleurs, c'est exactement ce que je fais dans le javascript...
Et j'ai souhaité montrer un exemple simpliste, j'aurai pu le présenter avec 2 feuilles de style, une première qui défini une transformation rotate des élements p et l'autre css qui modifie la taille (transform: scale) de ces même éléments, et, que ce soit dans l'exemple ci-dessus ou dans le cas des 2 css, le problème est le même...
Concernant la syntaxe CSS, oui, en effet, c'est elle qui implique cela, en fait, je faisais simplement remarquer que la syntaxe utiliser par transform est l'équivalent d'une syntaxe CSS raccourci (comme border, background...etc...) mais qu'il n'y a pas l'équivalent non raccourci (ex: transform-rotate...), je suis plus clair ?
++
Le texte de ton billet est maintenant plus clair en effet
Pourquoi les transformations sont-elles si moches sous Firefox ?