css Mouvement avec hover, comment faire ?

[HenriK]

Bonsoir tout le monde,

Suite à cette discussion https://cocoriweb.community/threads/angle-de-rotation-texte.67/ je me demandais comment faire pour qu'un objet parfaitement horizontal penche lorsque la souris passe dessus ? Avec un effet pas trop rapide.

Je ne parviens pas à le faire avec hover dans mon code.
Merci

 

[Anthony]

Salut Henri,

Il serait bon que tu prennes la bonne habitude de poster le code qui concerne tes demandes. Ce serait vraiment plus simple pour les membres de t'aider. Là on ne sait pas ce que tu as essayé, comment tu as écrit ton code CSS, etc...

Qu'en pensez-vous monsieur l'aquariophiliste ?

 

[Hamza]

Le code Henri ! Le code !!

 

[HenriK]

C'est pas faux...

Alors voilà ce que j'ai fait.

<div class="angle">
    <h1>
        L'aquariophilie, une véritabke passion
    </h1>
    <ul>
        <li>Poissons</li>
        <li>Aquariums</li>
        <li>Aliments</li>
        <li>Décoration</li>
        <li>Matériel</li>
    </ul>
</div>

Et le code CSS

.angle {
    display: flex;
    flex-direction: column;
    padding: 10px 5px 10px 5px;
    margin: auto;
    background: #FF6600;
    color: #FFF;
    border: 5px solid #333;
    border-radius: 5px;
}

.angle hover {
    transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -webkit-transform: rotate(8deg);
    -khtml-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
}

Voilà mais ça fonctionne pas quand la souris passe au dessus du bloc avec le texte.

 

[Anthony]

J'ai copié ton code dans Codepen et voilà le résultat



Tu as une erreur de syntaxe dans ton code CSS pour l'utilisation de hover
il faut écrire .angle:hover et non .angle hover

:hover - CSS : Feuilles de style en cascade | MDN

La pseudo-classe :hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.

developer.mozilla.org

 

[HenriK]

Oh la la... J'ai pas les bases !!
Merci Anthony, effectivement ça fonctionne mieux quand le code est bien écrit. ça marche aussi sur mon site local.

Autre chose, comment faire pour que l'effet soit un peu plus doux ?

 

[Nicolas]

transition-duration: 1s;
Dans ton code CSS .angle:hover


J'ai mis à jour le Codepen, refais le test !

 

[HenriK]

Nickel ! Merci beaucoup.