probleme de hover et rotation de l'image

Default
,

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éponse

179547
,

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

Default
,

J'ai du mal à comprendre :

  • Tu as défini une animation mais tu ne l'utilise nulle part.
  • Cette animation ne peut rien faire de visible puisque le début et la fin sont identiques.

Essaie peut-être de revoir des exemples avec animation : http://stylescss.free.fr/v2-properties/animation.php
et avec transition http://stylescss.free.fr/v2-properties/transition.php