0
이미지를 회전시키고 다른 이미지 나 텍스트를 표시하려고합니다.회전 변환이 FF에서 제대로 작동하지 않고 IE에서 전혀 작동하지 않습니다.
Chrome에서 정상적으로 작동하지만 Firefox에서 사용해도 회전은 작동하지만 앞면과 같은 이미지가 뒤쪽에 표시됩니다.
IE는 전혀 작동하지 않지만 Internet Explorer가 preserve-3d를 지원하지 않는 것으로 나타났습니다. 그러나 FF 용으로 만족스러운 답변을 찾을 수 없습니다.
이상한 점은 이미지 뒤에있는 텍스트가 회전하면 이미지가 아닌 FF에서 잘 작동한다는 것입니다.
<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>
과를 heres 내 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;
}