Css3 en action avec Firefox 3.1b1pre

hugo — Tue, 07 Oct 2008 13:30:00 +0200

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.

Css3 in action with Firefox 3.1b1pre

Css3 in action with Firefox 3.1b1pre from hugo on Vimeo.

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

DigitalSpirit - Tag - css 3

Css3 en action avec Firefox 3.1b1pre