CSS3: transitions sur plusieurs éléments

Salut à vous!

CSS3 permettant de faire des transitions, notamment l'agrandissement d'un objet, j'ai essayé de faire un menu de navigation un peu spécial:

En bas à gauche de la fenêtre du navigateur, un quart de disque qui s'agrandit au passage de la souris. Dans ce quart de disque des liens vers différentes pages et ou sujets. -> navigation facilitée pour les interfaces tactiles (à voir...). Et peut-être même une arborescence vers l'extérieur du quart du disque... La page de test...


Mon problème: comment intégrer ces liens sur mon image qui s'agrandit?

La transition fonctionne avec Chrome et firefox 3.6...

Tout simplement en mettant ton image en background d'un element qui lui contient tes liens puis en couplant avec scale

tontruc
{
    height: ...
    width: ...
    background: url(tonimage);
}

tontruc:hover
{
    /* width et height * 1.5 */
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    transform: scale(1.5);
}

Salut,

Merci pour ta réponse!

Mais le scale ne fait pas de transition... Et en faisant une transition sur height et width l'image de background ne suit pas en resize, elle est simplement répétée... -> W3C -> pour les transitions: background-image:only gradients.

Donc en utilisant les transitions, seul le gradiant de l'image de background peut être modifié. Finalement je pense avoir trouvé une solution mais qui est lourde... je redéfinis l'état des éléments fille de mon élément "hovered", comme les images, les liens...

Et ça marche, mis à part quelques problèmes de synchro des transitions au niveau des tailles du texte et des div...