CODEWITHSUNDEEP
css
sukesh
sukesh

Reputation: 2423

CSS flip animation varies in browser

Here is a simple horizontal flip animation - http://jsfiddle.net/vntajmgh/2/
and I see 2 issues:

  1. Open the url in chrome. Hover over the red div. The flip is ok, but the background color for the back div(blue) is not applied.

  2. Open the url in firefox. The flip is like stuck. I can see the blue colored back div sometimes.

I guess it's 'stuck' here because the height is 100vh, which when reduced works fine, but should it not work with the full height too?

.flip-container {
    width: 150px;
    height: 100vh;
    perspective: 800px;
    color: #fff;
    position: relative;    
}
.flipper {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform linear 0.6s;
}
.flipper div {
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.flipper .front {
    background: red;
}
.flipper div:after {
    content:"";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("http://www.transparenttextures.com/patterns/3px-tile.png");
    width: 100%;
    height: 100%;
    opacity: 0.5;
    z-index: 1;
}
.flipper .back {
    background: blue;
    transform: rotateY(180deg);
}
.flipper:hover {
    transform: rotateY(180deg);
}
<div class="flip-container">
    <div class="flipper">
        <div id="1front" class="front">1-front</div>
        <div id="1back" class="back">1-back</div>
    </div>
</div>

UPDATE: Here is the working fiddle - http://jsfiddle.net/gf3g8sz1/1/

Upvotes: 3

Views: 528

Answers (3)

vals
vals

Reputation: 64164

The problem in Chrome is caused by the pseudo element. I have changed the way to get the image blended with red without an pseduo element, and now it works OK.

The problem in FF is caused by the reduced-disappeared size of the element that receives the hover. I have changed the hover so that it is triggered by the container, and now it works also ok.

It is always a good idea to avoid using hover on transformed elements, they usually give some kind of problems 

.flip-container {
    width: 150px;
    height: 100vh;
    perspective: 800px;
    color: #fff;
    position: relative;    
}
.flipper {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform linear 0.6s;
}
.flipper div {
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.flipper .front {
    background: red;
    background-image: linear-gradient(rgba(255,0,0,0.5),rgba(255,0,0,0.5)), url("http://www.transparenttextures.com/patterns/3px-tile.png");
}
.flipper .back {
    background: blue;
    transform: rotateY(180deg);
}
.flip-container:hover .flipper {
    transform: rotateY(180deg);
}
<div class="flip-container">
    <div class="flipper">
        <div id="1front" class="front">1-front</div>
        <div id="1back" class="back">1-back</div>
    </div>
</div>

Upvotes: 0

Shibin Joseph
Shibin Joseph

Reputation: 99

Add an overflow hidden to the parent div(flip-container). When we are using 100vh(view port height) with rotate transform property, its actually taking more height than the view port has. so hide it by using overflow hidden.

css

.flip-container {
    overflow:hidden;
}

To get the same hover effect in both browser you have to modify the hover CSS.

DEMO

Upvotes: 1

maioman
maioman

Reputation: 18734

removing:

backface-visibility: hidden;

will make the back color visible

Upvotes: 0

Related Questions