• Transformer des éléments

    Transform

    Voici une propriété css3 qui peu renvoyer le javascript aux oubliettes. L'inconvénient? Et bien... c'est du css3 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-transformscale(X);
    -moz-transformscale(X);
    -o-transformscale(X);
    transformscale(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-transformskewXdeg);
    -moz-transformskew(Xdeg);
    -o-transformskew(Xdeg);
    transformskew(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

    1
    Lundi 26 Décembre 2011 à 19:36

    Cool merci!!je l'utiliserai a mon prochain thème x)

    2
    Lundi 26 Décembre 2011 à 21:23

    De rien =)

    3
    Mardi 27 Décembre 2011 à 22:33

    Ah, le code que j'ai utilisé pour la rotation de mes menus :O /sors/

    4
    Mercredi 11 Janvier 2012 à 13:58

    On peut aussi ajouter de la transition pour faire un effet un-peu plus sympa ;)

    5
    Dimanche 15 Janvier 2012 à 19:45

    trés beau

    6
    Mardi 17 Janvier 2012 à 19:57

    Ça faisait longtemps que je n'étais pas passé sur ton blog et je vois que tu as mis pas mal de trucs sympa

    Merci beaucoup pour ce super tuto, ce sera l'effet Déplacer pour moi ^^

    7
    Aikya Profil de Aikya
    Mercredi 30 Mai 2012 à 19:34

    C'est trop joli l'effet rotation avec l'effet transition >w<

    8
    Mercredi 30 Mai 2012 à 20:16

    J'adore les transition :) Ça rend bien avec a peu près n'importe quoi ^^

    9
    MyungSoo Profil de MyungSoo
    Dimanche 10 Juin 2012 à 12:55

    euh sa rend comment ? '-'

    10
    Dimanche 10 Juin 2012 à 13:24

    Par exemple le titre "transform" qui grossi si tu passe la souris dessus. Ou les avatars dans le modules des derniers visiteurs ;)

    11
    MyungSoo Profil de MyungSoo
    Dimanche 10 Juin 2012 à 14:17

    Ah ok ! :)

    12
    Mardi 12 Juin 2012 à 19:07

    Merci , c'est très pratique^^

    13
    Shuchu Profil de Shuchu
    Lundi 18 Juin 2012 à 10:20

    Salut~
    J'aimerais bien faire comme dans tes exemples, dès que je clique, ça fait une rotation. Mais je ne veux pas que, dès que je met le code, l'image est déjà penchée... Ca va faire un peu ch**r avec les tutos et les ressources... Donc, j'aimerais bien savoir comment on fait *w*

     

    14
    Lundi 18 Juin 2012 à 10:23

    Il faut appliquer la propriété au survol:

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

    15
    Shuchu Profil de Shuchu
    Lundi 18 Juin 2012 à 10:36

    Ok, merci *w*

    16
    Single Profil de Single
    Mardi 19 Juin 2012 à 16:46

    Bonjour,

    J'ai essayé mais ca ne marche pas. Voilà le code que j'ai mis :

    .module_menu_type_lastvisitors {-webkit-transform: rotate(5);
    -moz-transform: rotate(5);
    -o-transform: rotate(5);
    transform: rotate(5);}

    Je ne comprends vraiment rien aux explications, même si elles sont très bien présentées. --"

    Merci.

     

    17
    Aikya Profil de Aikya
    Mardi 19 Juin 2012 à 17:53

    .module_menu_type_lastvisitors img {-webkit-transform: rotate(5); 
    -moz-transform: rotate(5); 
    -o-transform: rotate(5); 
    transform: rotate(5);}

    Je pense que ça marchera comme ça ^^

    18
    Single Profil de Single
    Mardi 19 Juin 2012 à 18:10

    Non. Ca n'a pas marché. Mais une amie m'a aidé à mettre ce Css, et le code donne ca :

    .module_menu_type_lastvisitors {-webkit-transform: rotate(5);
    -moz-transform: rotate(5);
    -o-transform: rotate(5);
    transform: rotate(5);}

    .module_menu_type_lastvisitors
    img {opacity: 0.5;}

    .module_menu_type_lastvisitors img:hover {
    opacity: 1;
    -webkit-transition: 500ms;
    -moz-transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
    transform:rotate(5deg)
    }

     

    >> Pour celle qui n'y arrive pas utilisé ce code ! ;]♥

     

    Et je te remercie beaucoup Niark de m'avoir donner une réponde tout de même ! :]♥♥♥

    19
    Mardi 19 Juin 2012 à 18:16

    Il faudrait que tu dise exactement ce que tu veux pour qu'on puisse t'aider ;) Le code de Niark était juste ^^

    20
    Single Profil de Single
    Mardi 19 Juin 2012 à 18:17

    Ah bon ? Pourtant, j'ai essayé, mais ca ne marche pas. :$

    21
    Shuchu Profil de Shuchu
    Mardi 19 Juin 2012 à 18:51

    T'as quel navigateur?

    22
    xX Ezreal Xx Profil de xX Ezreal Xx
    Lundi 25 Juin 2012 à 17:19

    oi j'ai réussis que avec le code de single mais j'utilise mozilla firefox

    23
    xX Ezreal Xx Profil de xX Ezreal Xx
    Lundi 25 Juin 2012 à 17:19
    24
    Mercredi 4 Juillet 2012 à 18:38

    J'ai une question : comment faire pour que ça fasse le simages dans les articles aussi ?

    Merci d'avance pour ta réponse

    25
    Mercredi 25 Juillet 2012 à 21:47

    Salut :)

    Qu'elle est la propriété :

    Les Liens du contenu au survol de la sourri ?

    Merci d'avance ;)

    26
    Aikya Profil de Aikya
    Jeudi 26 Juillet 2012 à 09:01

    .module_contenu  a:hover {propriété: valeur;}

    Mais je n'en suis pas sure ^^

    27
    Jeudi 26 Juillet 2012 à 09:04

    Hmm, si c'est ça, merci^^

    28
    Samedi 1er Septembre 2012 à 17:39

    Coucou, j'aimerais faire un effet fondu entre la taille normale du texte et sa taille x2, peux tu m'aider ? merci ^^

    29
    Dimanche 25 Novembre 2012 à 10:21

    Single : Je pense que c'est plutôt (5deg), non ?

    30
    Dimanche 13 Janvier 2013 à 12:51

    bonjour comment fait on pour ne redimensionner que le texte du titre de mes articles? ici j'ai une image mais je veux redimensionner uniquement le titre. Je fais comment?  http://artistic.eklablog.com/

    31
    Dimanche 13 Janvier 2013 à 12:58

    non en fait c bon!!! j'ai trouvé

    32
    Anouuk Profil de Anouuk
    Samedi 20 Juillet 2013 à 18:56

    Je sais que ça n'a rien à voir, mais bon je me lance :

    Comment fait-on pour qu'il n'y ai plus cet horrible bleu quand nous allons sur "mon compte" et qu'on passe notre souris sur les liens ?

    33
    xX Ezreal Xx Profil de xX Ezreal Xx
    Samedi 20 Juillet 2013 à 19:35
    34
    Samedi 20 Juillet 2013 à 19:56

    Je cherche moi aussi pour retirer le fond bleu et sur la page le seul code que je vois le permettant n'a pas fonctionné ...

    35
    Anouuk Profil de Anouuk
    Dimanche 21 Juillet 2013 à 09:38

    MERCI !

    36
    uneadooo Profil de uneadooo
    Vendredi 23 Août 2013 à 11:44

    Comment on fait pour faire l'effet rotation sur des images?

    Merci :)

    37
    Jeudi 7 Novembre 2013 à 18:17

    coucou comment ont fait pour faire des boutons comme toi en haut de la page

    merci 

    38
    Mercredi 13 Novembre 2013 à 22:00

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

    @danyblue : -> http://fanstasy-graph.eklablog.net/onglets-coulissant-a39580075

    39
    Jeudi 28 Novembre 2013 à 18:43
    40
    Jeudi 28 Novembre 2013 à 18:49

    merci vais essayer

    41
    Mardi 4 Mars 2014 à 12:52

    excuser moi mais rien ne marche 

    42
    Mardi 4 Mars 2014 à 12:53

    je vous explique mon problème j'aimerais que pour le menu des visiteur sa soit flou que dès que l'on passe dessus sa tourne et que sa ne sois plus fou 

    43
    Mardi 4 Mars 2014 à 15:43

    my drawing life -> .module_menu_type_lastvisitors img:hover {

           -webkit-filterblur(Xpx);
          -moz-filterblur(Xpx);
          -o-filterblur(Xpx);
          filterblur(Xpx);
        -webkit-transformrotate(Xdeg);
        -webkit-transformrotate(Xdeg);
        -moz-transformrotate(Xdeg);
        -o-transformrotate(Xdeg);
        transformrotate(Xdeg);
         -webkit-transition-duration: Xs;
                       -moz-transition-duration: Xs;
                       transition-duration: Xs;}

     

    Remplace X par la valeur que tu souhaites.

    44
    Mardi 4 Mars 2014 à 21:34

    ohh merci mais c'est le X  en violet 

    45
    Mardi 4 Mars 2014 à 21:42

    Tous les X sont à modifier ;)

    "blur" permet de "flouter" les avatars. Plus la valeur est grande, plus l'image sera floue.

    L'explication de "rotate" se trouve dans cet article.

    "transition" permet d'appliquer ces changement sur une durée X indiquée en s (seconde) ou ms (milli-seconde)

    46
    Mardi 4 Mars 2014 à 22:49

    j'aimerais aussi arrondir les contenu comme sur ce blog sauf que moi sa serais aussi le menu et l'en tête qui seront arrondis quelqu'un veut bien avoir pitier du'une fille pomé comme moi 

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    47
    Mardi 4 Mars 2014 à 23:00

    Je ne comprend pas ce que tu veux arrondir ^^'

    48
    Mardi 4 Mars 2014 à 23:12

    @My drawing life : Merci de poser les questions dans l'article adapté et non pas dans tous les articles...

    49
    la valoche
    Mardi 4 Mars 2014 à 23:15
    bonjours enfin bonsoir je suis my dawing life sauf que je ne suis pas connecter et que j ai la fleme de le faire mis je veux te répondre car sa fait un mois que je cherche se fichu code
    donc se que j aimerais c est que tu vois dans modifier thème /contenu/après tout le bla bla j aimerais que tu vois quand on poste un article il apparait dans un module du bloc mince je ne sais pas comment cela s appelle donc j appelle sa un forma voilà c'est le forma du contenu que je veux arrondire tu vois à peu près excuse moi de mon imprécision
    50
    la valoche
    Mardi 4 Mars 2014 à 23:18
    à excuse moi mais je répondais à une question
    51
    Vendredi 20 Juin 2014 à 21:00

    Merci pour ces codes ils me seront utiles :D

    52
    Lundi 26 Septembre 2016 à 19:55

     bonsoir comment dois je faire pour les titres ? c est quel sélecteur merci de vos réponse bonne soirée

      • Jeudi 29 Septembre 2016 à 20:02

        Pour les titres des articles

        .module_titre

        Pour les titre des modules

        .module_menu_titre

    53
    Vendredi 30 Septembre 2016 à 23:31

    merci Nagalia c est gentil

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :