0
J'essaie d'obtenir des images pour faire pivoter et soit afficher une autre image derrière ou du texte. Je l'ai bien fonctionner sur Chrome mais quand je l'essaie sur Firefox, la rotation fonctionne mais la même image s'affiche à l'arrière comme à l'avant.faire pivoter la transformation ne fonctionne pas correctement dans FF et ne fonctionne pas du tout dans IE
IE ne fonctionne tout simplement pas du tout mais de la googling que j'ai fait, il semble que IE ne supporte pas le preserve-3d mais je ne trouve pas de réponse satisfaisante pour FF.
La chose étrange est que la rotation avec le texte derrière l'image fonctionne bien sur FF, mais pas d'images.
Voici mon HTML:
<div class="f1_container">
<div class="f1_card" class="shadow">
<div class="front face">
<img src="images/beesm.jpg"/>
</div>
<div class="back center">
<img src="images/flysm.jpg"/>
</div>
</div>
</div>
et Heres mon CSS:
.f1_container {
position: relative;
margin: 10px auto;
width: 600px;
height: 397px;
z-index: 1;
margin-top: 20px;
margin-bottom: 20px;
}
.f1_container {
perspective: 1000;
}
.f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
.f1_container:hover .f1_card {
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: left;
background-color: #cac8c8;
}