Css3 - 3D Flip Animation - Ie10 Transform-Origin: Preserve-3D Workaround

CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround

I also couldn't seem to find a good example of this anywhere, so I spent some way too much time making my own.

This one works on all browsers, does not have that weird 360deg IE flip, and includes provision for static content (that lives on both sides of the card - which I needed to put a 'flip' button at the top right of both sides).

--I tested on latest versions of Chrome, Firefox, Safari, Opera, and IE.

http://jsfiddle.net/Tinclon/2ega7yLt/7/

Edit: Also works with transparent backgrounds: http://jsfiddle.net/Tinclon/2ega7yLt/8/

The css (of course) includes IE hacks, so it's a bit long, but the html is quite straightforward:

<div class="card">
  <div class="content">
    <div class="cardFront">FRONT CONTENT</div>
    <div class="cardBack">BACK CONTENT</div>
    <div class="cardStatic">STATIC CONTENT</div>
  </div>
</div>

$('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this));

.card {
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    margin:80px 150px;
    width:320px;
    height:243px;
    vertical-align:top;
    position:absolute;
    display:block;
    font-size:25px;
    font-weight:bold;
}

.card .content {
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    /* content backface is visible so that static content still appears */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;


    border: 1px solid grey;
    border-radius: 15px;
    position:relative;
    width: 100%;
    height: 100%;

}
.card.applyflip .content {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}


.card .content .cardStatic {
    /* Half way through the card flip, rotate static content to 0 degrees */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);

    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
    line-height:100px;
}

.card.applyflip .content .cardStatic {
    /* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .content .cardFront {
    background-color: skyblue;
    color: tomato;
}

.card .content .cardBack {
    background-color: tomato;
    color: skyblue;
}

.card .content .cardFront, .card .content .cardBack {
    /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    line-height:200px;
    border-radius: 14px;
}
.card .content .cardFront, .card.applyflip .content .cardFront {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}

.card .content .cardBack, .card.applyflip .content .cardBack {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .content .cardFront, .card.applyflip .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: hidden;
}
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }

Internet Explorer Preserve 3D fix

Internet Explorer 10 and 11 only partially support 3D transforms. (Older versions of Internet Explorer do not support this property).

Internet Explorer 10 and 11 'have only partial support' because:

not supporting the transform-style: preserve-3d property. This
prevents nesting 3D transformed elements.

further Reading

This property is suggested to be implemented in the next version of internet explorer, so unfortunately the current IE doesn't really support any 'good' or 'complex' 3D functionality.

Since IE will 'ignore' this property, you may be able to display a message of banner to inform users to use Chrome or Firefox for better experience (it also means you will have to implement less browser hacks to support IE in general).

In answer to your question

Note The W3C specification defines a keyword value of preserve-3d for
this property, which indicates that flattening is not performed. At
this time, Internet Explorer 10 does not support the preserve-3d
keyword. You can work around this by manually applying the parent
element's transform to each of the child elements in addition to the
child element's normal transform.

This is suggesting to apply the transform of the parent manually on the child element. So the 3d transform stated on your parent (.flip1) should also be placed on your child element(s) (.back and .front) as well.

Rotating div elements with CSS transform on IE

As other users said, the problem is that IE doesn't support preserve-3d

To solve it, you need to apply all the transforms on the child elements, the initial ones and the rotated ones

.social {  float: left;  width: 100px;   height: 100px;      position: relative;}.social > div {    width: 100px; height: 100px;    position: absolute; top: 0; left: 0; right: 0; bottom: 0;    transition: transform .25s ease-out;}.social > .front {    width: 100px;     height: 100px;     background: red;    transform: translateZ(40px);}.social:hover .front {    transform: rotateY(90deg) translateZ(40px);}.social >.back {     transform:rotateY(-90deg) translateZ(40px);     width: 100px;      height: 100px;      background: black;}
.social:hover .back {     transform:rotateY(0deg) translateZ(40px);}

<a class="social" href="" target="_blank">     <div class="front">     </div>     <div class="back">     </div>   </a>

.container{  perspective: 1500px;}.canvas{    position: relative;    width: 300px;    transform-origin: 50% 50% 0;    transform-style: preserve-3d;    overflow: visible;}.canvas img{  max-width: 100%;  backface-visibility: hidden;  position: relative;  z-index: 2;    transition: transform 1s ease 0s;}input:checked + .canvas img {  transform: rotateY(180deg);}.red{  background: red;  width: 100%;  height: 100%;  position: absolute;  top:0;  left:0;  z-index: 1;  backface-visibility: hidden;  transform:  rotateY(180deg);    transition: transform 1s ease 0s;}input:checked + .canvas .red {  transform: rotateY(360deg);}

<div class="container">  <input type="checkbox">  <div class="canvas">    <img src="http://todofondosdeamor.com/wp-content/uploads/images/48/gatitos-1__400x300.jpg">    <div class="red"></div>  </div></div><p>That checkbox over there</p>