-
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:
rotationsé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)
redimensionnersé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
Inclinersé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 verticalementDéplacersé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
Ç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 ^^
Par exemple le titre "transform" qui grossi si tu passe la souris dessus. Ou les avatars dans le modules des derniers visiteurs ;)
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*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);}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.
.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 ^^
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 ! :]♥♥♥
Il faudrait que tu dise exactement ce que tu veux pour qu'on puisse t'aider ;) Le code de Niark était juste ^^
J'ai une question : comment faire pour que ça fasse le simages dans les articles aussi ?
Merci d'avance pour ta réponse
Salut :)
Qu'elle est la propriété :
Les Liens du contenu au survol de la sourri ?
Merci d'avance ;)
Coucou, j'aimerais faire un effet fondu entre la taille normale du texte et sa taille x2, peux tu m'aider ? merci ^^
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/
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 ?
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é ...
@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
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
my drawing life -> .module_menu_type_lastvisitors img:hover {
-webkit-filter: blur(Xpx);
-moz-filter: blur(Xpx);
-o-filter: blur(Xpx);
filter: blur(Xpx);
-webkit-transform: rotate(Xdeg);
-webkit-transform: rotate(Xdeg);
-moz-transform: rotate(Xdeg);
-o-transform: rotate(Xdeg);
transform: rotate(Xdeg);
-webkit-transition-duration: Xs;
-moz-transition-duration: Xs;
transition-duration: Xs;}Remplace X par la valeur que tu souhaites.
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)
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
@My drawing life : Merci de poser les questions dans l'article adapté et non pas dans tous les articles...
49la valocheMardi 4 Mars 2014 à 23:15bonjours 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écision50la valocheMardi 4 Mars 2014 à 23:18à excuse moi mais je répondais à une question
Ajouter un commentaire
Cool merci!!je l'utiliserai a mon prochain thème x)