0
Ich versuche, Bilder zu drehen und entweder ein anderes Bild hinter oder etwas Text anzuzeigen.rotate transform funktioniert nicht richtig in FF und funktioniert überhaupt nicht in IE
Ich habe es funktioniert gut in Chrome, aber wenn ich es auf Firefox versuche, funktioniert das Drehen, aber das gleiche Bild zeigt auf der Rückseite wie auf der Vorderseite.
IE funktioniert überhaupt nicht, aber aus dem googling habe ich es getan scheint, dass IE die Erhaltung 3d nicht unterstützt, aber ich kann keine befriedigende Antwort für FF finden.
Die seltsame Sache ist, dass die Drehung mit dem Text hinter dem Bild funktioniert gut auf FF, nur keine Bilder.
Hier ist mein 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>
und here meine 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;
}