我使用transform：rotateY为图像添加了翻转卡片效果，它在firefox和chrome上运行得很好，但是IE或者我的旧Android 2.3.6手机没有运气。您可以查看http://www.canardesign.com/services
这是标记：
<div id="coffee_container" title="Prenez un rendez-vous, je vous offre le café"><div id="coffee_card"><div class="coffee front"></div><div class="coffee back"><p><a href="www.example.com/contact">Prenez un rendez-vous, je vous offre le café !</a></p></div></div></div>
CSS：
#coffee_container{
float:right;
position: relative;
margin: 10px auto;
width: 150px;
height:152px;
z-index: 1;
perspective: 1000;
}
#coffee_card{
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.7s linear;
}
#coffee_container:hover #coffee_card {
transform: rotateY(180deg);
-ms-transform: rotateY(180deg); /* IE 9 */
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
}
.coffee{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
background:url(images/coffee-mug.png) 0 0 no-repeat;
cursor:pointer;
}
.coffee.back{
position: absolute;
top: 0;
left: 0;
display:block;
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
box-sizing: border-box;
color: #aaa;
background:url(images/coffee-mug-flipped.png) 0 0 no-repeat;
}
.coffee.back p{
position:absolute;
line-height:1.6em;
right:20px;
top:10px;
text-align:center;
display:block;
width:70px;
font-family:Impact, Charcoal, sans-serif;
letter-spacing:1px;
}
.coffee.back p a{
display:block;
width:70px;
color:#666;
}
任何帮助将不胜感激！ 歌剧的问题太顺便了。