在悬停时旋转不能在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）; 不幸的是，并非所有变换都没有供应商前缀。 检查http://caniuse.com/#feat=transforms2d以获取浏览器支持

Answer 2

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

-webkit-背面能见度：隐藏;