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...?