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>