Forum : probleme de hover et rotation de l'image

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>

probleme de hover et rotation de l'image

2 réponses