我是新来的，如果我被误解了，很抱歉。
当用户悬停一个 div 时，我制作了一个翻转动画。在 Firefox 中完美运行，但在 chrome 中却不行。我失去了最后一个小时试图找到解决方案。
HTML
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img src="http://www.online-image-editor.com/styles/2013/images/example_image.png" />
</div>
<div class="back">
<div class="middle">
<div class="avatar">
<img src="http://planetearth.nerc.ac.uk/images/uploaded/custom/blue-planet-c.jpg" />
</div>
<div class="cv">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
CSS
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
}
/* UPDATED! flip the pane when hovered */
.flip-container:hover .back, .front img:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 475px;
height: 300px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATED! front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
display: table;
}
/*
Some vertical flip updates
*/
.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
transform: rotateX(180deg);
}
.back div.middle {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 0px 55px;
}
.back div.middle .avatar {
display:block;
}
.back div.middle .avatar img {
border-radius: 50%;
}
.back div.middle .cv {
}
.back div.middle .cv p {
width: 90%;
margin-left: auto;
margin-right: auto;
}