Rotations avec CSS3

L'exemple ci-dessous va faire une rotation à 90 degrés antihoraire.
Il est assez complet pour prendre en compte le plus grand nombre de navigateurs. Il est à noter que la valeur filter poir Internet Explorer peut accepter 4 valeurs : 0, 1, 2 et 3 pour des rotations à 0, 90, 180, et 270 degrés.

.elementRotation {
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform: rotate(-90deg);
}

On peut simplifier pour les dernières générations de navigateurs à :

.elementRotation {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
}
BLOG COMMENTS POWERED BY DISQUS