悬停时旋转在 chrome 中不起作用

Question

我是新来的，如果我被误解了，很抱歉。

当用户悬停一个 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;
}

JSFIDDLE

Answer 1

使用 -webkit-transform: rotateY(xdeg); 不幸的是，在没有供应商前缀的情况下，transform 中的所有内容都无法正常工作。 检查http://caniuse.com/#feat=transforms2d 以获取浏览器支持

Answer 2

把它放在你所有的css中，也许它会帮助你......

-webkit-backface-visibility:hidden;