CODEWITHSUNDEEP
htmlcssgoogle-chromerotateanimation
fiskolin
fiskolin

Reputation: 1421

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

Upvotes: 1

Views: 980

Answers (2)

julschi
julschi

Reputation: 130

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

-webkit-backface-visibility:hidden;

Upvotes: 0

Haroldchen
Haroldchen

Reputation: 199

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

Upvotes: 4

Related Questions