Rotate in hover doesn't work in chrome

问题

I am new here, so sorry if I am being misunderstood.

I made a flip animation when user hovers a div. Works perfectly in Firefox, but not in chrome. I lost last hour trying to find solution.

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

回答1:

Use -webkit-transform: rotateY(xdeg); Unfortunately not everything from transform works without vendor prefixes. Check http://caniuse.com/#feat=transforms2d for browser support

回答2:

put this to all your rotations in css, maybe it'll help you...

-webkit-backface-visibility:hidden;

来源：https://stackoverflow.com/questions/22379971/rotate-in-hover-doesnt-work-in-chrome

标签

html

css

google-chrome

rotateanimation