CSS Flip Transition Between Two 's

Question

I have created a flip transition between two divs using the following css...

.flip-container {
    -webkit-perspectiv         


        

Answer 1

To 2.

have you ever looked at modernizr. (only works if js is active).

This library tests for css features and adds a the corresponding class to the html tag. (e.g. csstransforms). With this you could style the area corresponding to the supported features.

e.g. having a such a rule in you stylesheet:

/*this is the common rule*/
.theArea {
     border: 1px solid green;
}

/*this rule will be applied if transitions are available*/
.csstransforms .theArea {
     border: 1px solid red;
}

At http://modernizr.com/download/ you have a list of all features you can test for.

It does not really test if the feature exists. But test if the corresponding keywords that are used are know by the browser, if yes then it is most likely that the browser supports that feature.

Answer 2

I have the same problem earlier with card flip , now i have got the solution for all the browsers for card flip even for IE10 fixes. i have written for hover please use the required code as per yours requirement.

HTMl Strucrure

<div class="flip-container">
   <div class="flipper">
      <div class="front">
        front
      </div>
    <div class="back">
        back
    </div>
</div>

css

.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective:1000;
    -ms-perspective: 1000;
    perspective: 1000;

    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 

}



    /* for IE */
.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* END: for IE */


.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;

    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
    top: 0;
    left: 0;
    width: 180px;
    height: 180px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;

    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;

    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 180px;


}

.front {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    background-position: center center;
    z-index: 2;
    background:green;
}

.back {
    background: #f2f2f2;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(-180deg);
}

Demo on Jsfiddle

Answer 3

For the right half, I encounter this with my website (http://worldisbeautiful.net) which use the flip animation too. It looks like a webkit bug, your animation works fine with firefox. I had some hard time to avoid this bug, and i'm not sure how you can avoid it with your animation because mine involve 2 additionals DIV inside "back" DIV. However, I had to use pointer-events: none; inside the back div, hope it can help you.

For the second question, i suggest you to display degraded version by default. Then, you can use something like Modernizr to check for browsers supports and then use the CSS you need for your animation. http://modernizr.com/ You'll need to check for csstransitions, csstransforms and csstransforms3d.