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

.flip-container {
    -webkit-perspective: 1000;

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

    -o-perspective: 1000;

    perspective: 1000;
    max-width: 320px;
    width: 100%;
}

/* flip speed goes here */
.flipper {
    -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;

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

    position: relative;
}

.flipper > img {
    opacity: 0;
    z-index: 0;
}

.flipper.flipped {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* hide back of pane during swap */
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
}

/* back, initially hidden pane */
.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);    
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

With the following html...

<div class="flip-container">
  <div class="flipper" id="flipper" onclick="this.classList.toggle('flipped')"> 
    <div class="front" id="front"></div>
    <div class="back" id="back"></div>
  </div>
</div>

I now have two problems...

1. After flip only the right half of the presented <div> is registering the onClick

2. Where the browser doesn't support the transition I would like this to degrade to either:

   • a simple non-animated version
   • or the two <div>'s side-by-side

Any solutions/suggestions to fix either of these greatly appreciated.

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

.flip-container {
    -webkit-perspective: 1000;

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

    -o-perspective: 1000;

    perspective: 1000;
    max-width: 320px;
    width: 100%;
}

/* flip speed goes here */
.flipper {
    -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;

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

    position: relative;
}

.flipper > img {
    opacity: 0;
    z-index: 0;
}

.flipper.flipped {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* hide back of pane during swap */
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
}

/* back, initially hidden pane */
.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);    
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

With the following html...

<div class="flip-container">
  <div class="flipper" id="flipper" onclick="this.classList.toggle('flipped')"> 
    <div class="front" id="front"></div>
    <div class="back" id="back"></div>
  </div>
</div>

I now have two problems...

1. After flip only the right half of the presented <div> is registering the onClick

2. Where the browser doesn't support the transition I would like this to degrade to either:

   • a simple non-animated version
   • or the two <div>'s side-by-side

Any solutions/suggestions to fix either of these greatly appreciated.

• javascript
• html
• css

• To 1. : I currently don't know how to solve, but it seems to be a z-ordering bug caused by the 3d rotation. If you use the DevTools of Chrome and check with the magnifier which element is under mouse on the left side you will see that it is the sentInfo div. I hope this info helps you to solve the problem. – t.niese Commented Jun 7, 2013 at 11:30
• yep - I've got that sorted now - thank you – Michael Platt Commented Jun 7, 2013 at 12:23
• I'm glad that this info helped you. Was it something obvious you changed or something special? would be interesting to know. – t.niese Commented Jun 7, 2013 at 12:29
• its a bit "hacky" but for now I have just added the onClick to the sentInfo div as well so that it fires without having to try and figure out whats happening to the z-index after the transition - it has worked - I will look at a more elegant solution later (probably doing some relayout work so that sentInfo is not anywhere near the transition). – Michael Platt Commented Jun 7, 2013 at 12:35

3 Answers 3

For the right half, I encounter this with my website (http://worldisbeautiful) 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./ You'll need to check for csstransitions, csstransforms and csstransforms3d.

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

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 mon rule*/
.theArea {
     border: 1px solid green;
}

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

At http://modernizr./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.