probleme de hover et rotation de l'image

Par wijdane imer, il y a 6 ans


Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code. je ne peux pas faire le hover sur l'id d'Attaque et id de la defense et statique et l'image ne tourne pas de 180degre

voila une partie de mon code CSS

@media screen and (max-width:950px) { #fiche{ background-color:black; width:680px; height:555px; position:absolute; border-radius:25px; } #Nom{ font-style :italic; color: yellow; font-weight:bold; list-style-type:none; font-size:19px; text-align:center; top:10px; } #styleim{ background-image:linear-gradient(to top,#317d44,black); width:400px; height:330px; position:fixed; box-shadow:2px 2px 2px #317d44; left:30px; display:block; position:absolute; } .image{ width:300px; height:300px; transform: rotateY(180deg); } img:hover{ -webkit-transition: all 0.5s ease; transform: rotate3d(0,0,0,180deg); } #Attaque{ background:linear-gradient(to top,#ff2300,#ff8b00); position:fixed; box-shadow:2px 2px 2px #ff6600; width:220px; height:250px; left: 446px; top: 25px; display:block; } .Attaque{ list-style-type: none; font-size: 27px; margin-left: 2px; font-style: italic; color: #ff0000; font-weight:bold; } #Defense { list-style-type: disc; background: linear-gradient(to top ,#00fbff,#0097ff) ; position:fixed; box-shadow:2px 2px 2px #33ccff; width:220px; height:92px; top: 292px; left: 446px; display:block; } .defense{ list-style-type: none; font-size: 24px; margin-left: 2px; font-style: italic; color: #0066ff; font-weight:bold; } #Statique{ background:linear-gradient(to top,white,violet); list-style-type: disc; position:fixed; width:400px; height:150px; display:block; top: 355px; left: 22px; } .statistique{ list-style-type: none; font-size: 24px; margin-left: 2px; font-style: italic; color: #7a00ff; font-weight:bold; } @keyframes animate { 0%{ transform:perspective(1000px) rotateX(180deg); } 100%{ transform:perspective(1000px) rotateX(180deg); } } }

et une partie de mon HTML

<body> <div id="fiche"> <div id="styleim"> <li id="Nom"> Atria Adranos <img class="image" src="witch.jpg" alt=""/></li> </div> <div id="Statique"> <table> <tr> <td colspan="1"> <li class="statistique">Statistiques</li> <ol style="list-style-type:disc"> <li>force: 11</li> <li>agilité: 12</li> <li>Volonté:15</li> <li>Vitalité: 230/230</li> <li>Magie:350/350</li> </ol> </td> <td> <ol style="list-style-type:disc"> <li>Charisme:8</li> <li>Empathie:13</li> <li>Rune crafting : 17</li> </ol> </td> </tr> </table> </div> <div id="Defense"> <li class="defense">Défense</li> <ol style="list-style-type:disc"> <li>Défense physique:8</li> <li>Défense magique:19</li> </ol> </div> <div id="Attaque"> <li class="Attaque">Attaque</li> <ol> <li style="list-style-type:disc">Physique <ul style="list-style-type:georgian"> <li>Baton:15</li> <li>Dague:12</li> </ul></li></ol> <ol> <li style="list-style-type:disc">Magie <ul style="list-style-type:lower-greek "> <li>Eau:32</li> <li>Feu:65</li> <li>Terre:12</li> <li>Air:56</li> <li>Mystique:84</li> </ul></li></ol> </div> </div> </body> </html>

2 réponses

Guilome, il y a 6 ans

Il me semble que le transition: 0.5s;, il faut le mettre en dehors du hover, il faut juste la pointer sur la balise que tu veux, en l'occurence, img ou .image