Html “悬停中旋转”在chrome中不起作用

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

当用户悬停在div上时，我制作了一个翻转动画。在Firefox中效果很好，但在chrome中却没有。我在寻找解决办法的最后一个小时里输了

HTML

---

使用-webkit转换：rotateYxdeg； 不幸的是，并非transform中的所有内容都可以在没有供应商前缀的情况下工作。

---

检查浏览器支持

使用-webkit转换：rotateYxdeg； 不幸的是，并非transform中的所有内容都可以在没有供应商前缀的情况下工作。

---

检查浏览器支持

将此应用于css中的所有旋转，也许它会帮助您

---

-webkit背面可见性：隐藏

将此应用于css中的所有旋转，也许它会帮助您

---

-webkit背面可见性：隐藏

他妈的，他妈的对。我完全忘记了-网络工具包。谢谢他妈的，他妈的对。我完全忘记了-网络工具包。谢谢@Harolchen的代码和您的代码并不是单独起作用的，只是在两种更改下都起作用。谢谢：我不能投票now@Harolchen的代码和您的代码并不是单独工作的，只是可以同时使用这两种更改。谢谢：现在不能投票了

<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>

/* 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;
}