• Transformer des éléments

    Par Ange-54 dans CSS le 3 Septembre 2013 à 21:53

    Merci à Nagalia

    Voici une propriété code CSS 3 qui peut renvoyer le javascript aux oubliettes. L'inconvénient? Et bien... c'est du code CSS 3 donc compatible seulement avec les versions les plus récentes des navigateurs.

    Transform? C'est quoi?

    Une propriété qui permet d'appliquer quatre effet assez sympa :

     

    rotation

    sélecteur {-webkit-transform: rotate(Xdeg);
    -moz-transform: rotate(Xdeg);
    -o-transform: rotate(Xdeg);
    transform: rotate(Xdeg);}

    On parle en degré. Logique non? Remplacez Xdeg par un nombre de degré (positif ou négatif) :

     

    redimensionner
    sélecteur {-webkit-transform: scale(X);
    -moz-transform: scale(X);
    -o-transform: scale(X);
    transform: scale(X); }

    Remplacez X par un chiffre entier ou décimal (/!\ mettre un point, pas une virgule => 1.3 et non 1,3)
    1= aucun changement
    0= invisible
    2=deux fois plus grand

    En claire, c'est le coeficient de dilatation
    Vous pouvez aussi faire:

    sélecteur {-webkit-transform: scale(X, Y);
    -moz-transform: scale(X, Y);
    -o-transform: scale(X, Y);
    transform: scale(X, Y); }

    X étant la largeur et Y la hauteur 

     

    Incliner
    sélecteur{ -webkit-transform: skewXdeg);
    -moz-transform: skew(Xdeg);
    -o-transform: skew(Xdeg);
    transform: skew(Xdeg);}

    On parle encore en degré ;)
    X incline horizontalement et Y verticalement 

     

    Déplacer

    sélecteur{ -webkit-transform: translate(Xpx, Ypx);
    -moz-transform: translate(Xpx, Ypx);
    -o-transform: translate(Xpx, Ypx);
    transform: translate(Xpx, Ypx); }

    Enfin, le déplacement. On déplace horizontalement de Xpx et verticalement de Ypx.

     

    Dans ces exemple, je n'ai utiliser la propriété que sur l'état survolé (:hover) mais vous pouvez très bien l'utiliser comme état permanant.

  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :