Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

Image qui pivote,

1780 appréciations
Hors-ligne
Bonjour, 
Ce sujet, c'est pile ce que je cherche à faire,
Lien
Le souci est qu'il y manque les parties qui m'intéressent,
C'est possible d'y remettre les codes? Merci,
Bon dimanche,
Mi Neth, 

4036 appréciations
Hors-ligne
COUCOU

Je ne sais pas ce que tu veux faire mais....


Faire une div ou mettre un code dans l'article.

La fonction rotate fera tourner plus ou moins l'image

img:hover {
border: medium none;
    transform: rotate(30deg);
    -moz-transtion: 2s;
}
img {
-moz-transition-duration:2s;
-moz-transition-timing-function:linear;
-webkit-transition-duration:2s;
-webkit-transition-timing-function:linear;
transition-duration:2s;
transition-timing-function:linear;
}

:sol:


1780 appréciations
Hors-ligne
Coucou Simon, 

Je vois ça dès que je peux, 
Là, j'ai un souci avec ma boîte de réception à voir, 
Mais dès que c'est réglé, je teste et reviens te dire, Sinon, oui, je cherche à faire tourner un peu une image, Un peu comme si elle basculait et reprenait sa position initiale, 
Encore merci pour ta réponse et ta proposition,  
Bonne fin de journée, 
Mi Neth, 

4036 appréciations
Hors-ligne
Ce serait mieux de mettre le lien où se trouve ton image.

Simon


1780 appréciations
Hors-ligne
Pour le moment, ce n'est que mon image test qui est dans ma boîte à fichiers, Je n'ai pas encore créé mon image  définitive, 
Veux-tu que je l'héberge ...je parle de mon image test... et mette le lien ici?

Encore merci à toi, 



4036 appréciations
Hors-ligne
Il faut que je vois l'article qui comporte cette image pour voir quel code est adapté.

Donc donnes moi le lien de l'article...



1780 appréciations
Hors-ligne
Il était dans mes brouillons, je l'ai supprimé ...me convenait pas... je le refais et je te donne le lien, 

Finalement, je n'ai pas refais complètement le brouillon, juste remis l'image et deux bouts de phrases, 
Par contre dans mes codes, j'en ai déjà un qui se nomme "img kitourn bis" et qui est destiné à mon article Ressources nobles, Je comptais partir de ce code, mais l'image tourne complètement,  Puis-je au moins me servir des div?
Le lien de mon brouillon 
Brouillon

Merci, 


Dernière modification le lundi 08 Mars 2021 à 14:40:45

4036 appréciations
Hors-ligne
elle pivote de 30 °  que tu modifieras dans le code......

Voir le code en place


JE L'AI MIS EN LIGNE DONC TU PEUX VOIR ET REMETTRE EN BROUILLON.

https://yacinth.blog4ever.com/test-image-kitourne-bascule





:cht:


4036 appréciations
Hors-ligne
Pour tourner moins vite ......

<*style type="text/css"*>
#articles_show_contenu_article p:hover,
#articles_show_contenu_article div {
    line-height: normal;
        border: medium none;
    transform: rotate(20deg);
    -moz-transtion: 4s;
    -moz-transition-duration:4s;
-moz-transition-timing-function:linear;
-webkit-transition-duration:2s;
-webkit-transition-timing-function:linear;
transition-duration:4s;
transition-timing-function:linear;
}

<*/style*>


1780 appréciations
Hors-ligne
Merci Simon, 
Je règle mes autres soucis et je vois ça, Là, je vais me pieuter, Fatiguée, 
Passe une bonne nuit, 
Mi Neth, 

1780 appréciations
Hors-ligne
Bonsoir Simon, 
Pour te dire que cela fait pivoter aussi le texte, 
je l'ai remis en brouillon en attendant, 
Bonne nuitée, 
Mi Neth, 

1780 appréciations
Hors-ligne
J'ai mis le texte au dessus de l'image pour voir ce que ça donne, 
C'est pareil, le texte bascule, 

155 appréciations
Hors-ligne
:b0: Mi Neth etSimon

Si j'ai bien compris tu veux un code comme j'ai sur mon menu horizontal de mon blog ou dans mon article Mes Bannières.

Au passage de la souris l'image est oblique



Voila le code Css 


/*partie images obliques*/ 
#oblique {   -webkit-transition: 0.4s linear;
     transition: 0.4s linear;
}
#oblique:hover{
      -webkit-transform: rotate(7deg);  
    -moz-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    -o-transform: rotate(7deg);
}


et le code Html

<*div id="oblique"*><*url de l'image*><*/div*>

Là j'ai mis 7deg à toi de modifier si tu veux plus



Dernière modification le mercredi 10 Mars 2021 à 12:41:05

4036 appréciations
Hors-ligne
RE

Je l'ai mis en place donc regardes le code.


L'image est dans le code HTML 


https://yacinth.blog4ever.com/test-image-kitourne-bascule


1780 appréciations
Hors-ligne
Bonsoir Stef et Simon, 

Oui, Stef c'est ça, 
Simon c'est presque top, Le texte ne bouge plus, mais mon image d'entête est décalée, 



Merci tous les deux,
Passez une bonne fin de soirée et un bon début de nuit,
Mi Neth, 

4036 appréciations
Hors-ligne
Coucou

oui c'est décalé car j'avais mis le code img au lieu de .rotation qui fait partie de la div





:sol:


1780 appréciations
Hors-ligne
Bonjour Simon, 
Merci à toi et merci à Stef, 
Passez une bonne journée, 
Mi Neth, 

4036 appréciations
Hors-ligne
Ce sujet est fermé, vous ne pouvez pas y répondre.
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie Petits conseils.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 6061 autres membres