我在 Chrome 中遇到了一个奇怪的错误(在 Firefox 中运行良好),不知道如何修复它。
http://jsfiddle.net/GkXA7/1/将鼠标悬停在卡片上时,图像显示在卡片背面向上翻转。但是,如果我从右侧定位图像,它就不会发生!?http://jsfiddle.net/GkXA7/2/
HTML
<div class="flip-container">
<div class="flipper">
<div class="front card">
<img width="40" height="40" src="http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg">
<h3>Front</h3>
</div>
<div class="back card">
<h3>Back</h3>
</div>
</div>
</div>
CSS
/* Flip Effect */
.flip-container {
perspective: 1000;
margin: 0 auto 20px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
.flip-container {
width: 400px;
height: 200px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
-webkit-transform-style: preserve-3d;
}
/* hide back of pane during swap */
.flipper .card {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 200px;
}
.flipper .front{
background-color:green;
}
.flipper .back{
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
background-color:red;
}
.front img{
position: absolute;
top:10px;
left:10px;
}
有没有办法防止图像出现在另一面,同时仍然能够绝对定位它?