Why Is Backface-Visibility Hidden Not Working in Ie10 When Perspective Is Applied to Parent Elements

body { transform-style:preserve-3d; transform:perspective(1500px);}@keyframes rotating {    from{        transform: rotateY(0deg);    }    to{        transform: rotateY(360deg);    }}
.poster {    animation: rotating 10s linear infinite;}
.poster { width:510px; height:310px; position:absolute; top:50%; left:50%; margin: 0 0 0 -256px; border-radius:4px; box-shadow:0 45px 100px rgba(0,0,0,0.4);  transform-style: preserve-3D; /* new */}
.poster .shine { position:absolute; top:0; left:0; background:-webkit-linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%); background:linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%); z-index:100;}
.layer-1, .layer-2 { position:absolute; top:0; left:0; transform: translateZ(10px); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: .1s; transition: .1s;}.layer-1 {background-color: blue; color:white;}.layer-2 {  background-color: red; transform:rotateY(180deg);}

  <div class="poster">  <div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>  <div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div></div>

Css3 perspective-property not working in IE10

I have no clue why you have xpersepective in your CSS, IE10 is unprefixed in CSS, however the perspective property must have some kind of unit for the depth, perspective: 1000 won't be applied because the browser doesn't know what unit it is in, similarly like width and height, etc, you have to apply px, em, etc. The only browsers that assume units (and in pixels) on the perspective property are Webkit browsers, and only when it is inside the transform property.

If you do a little research you, Microsoft states:

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.

So for now, you'll just have to implement the advised fix, if you want to go down that road.

If not, you're lucky. I spent time trying to make it transition smoothly over. Originally in your fiddle, you were transforming it very awkwardly and had too many styles, in my opinion, so the techniques in this JSfiddle should help: http://jsfiddle.net/NAy2r

Explained fiddle

So basically the front content exists in the container div, while the back content exists in the back div, which exists inside the container div. This is very similar to Apple's HTML5 Card flip demo, however there is a twist when it comes to backface-visibility.

At the time that Apple relased that demo, backface-visibiity didn't work on Chrome or Firefox. Chrome had some concept of perspective, but none of backface-visibility, so when you flipped an element, you'd still see through to the back and the content of the back would show through both sides as well; However on Safari, it'd be perfect because it initially understood these concepts.

In further updates of Chrome in the months afterwards, Chrome understood the property, however it was applied literally and the back was hidden completely, regardless if you flipped it or not! What would be the point of having this property if it was going to hide the back completely no matter what? You could just apply display:none, etc, to show the back if you wanted!!

And that is where IE stands as of today, it as well doesn't recognize the 'back' of the element (an element with transform:rotateY(180deg) is considered to be the backside) like other modern browsers do. So when the element is flipped, backface-visibilty: hidden is taken literally as it was in Chrome!

So this fiddle listens on an AnimationStart event on the container div, and on the animation start, it finds the duration of the animation and it uses that to calculate halfway though the animation, so when the animation is halfway, it changes backface-visibility to visible, that way the animation smoothly transitions like it's supposed to.

This was a pain to develop, IE10 is somewhat inconsistent, as it needs time to process it the first time (probably the jQuery). Notice the relief, lack of headache and fiery red eyes. The air around you has become cooler and you can finally breathe, because now you're not alone.

Edit: I forgot to add, that if your animation or transition has a different timing, the timing in this script will have to be adjusted, as it only works with linear transitions, as of now...

Very strange bug with box-shadow, perspective, overflow and backface-visibility: hidden in Google Chrome

Seems to be fixed in newer versions of Chrome.

Overflow hidden and child's backface visibility goes crazy

i had a hard time fixing your code, i also found some duplicate properties, so i decided to rewrite it from scratch since i think i got what you want to achieve.

basically you dont need to go from 360 to 180 you can just go from 180 to 0 and if you need another rotation from 0 to -180 ;)

when you put the same class which has a 180deg rotation on parent and child divs like this:

<article class="flip fliped anim" style="min-height: 308px;">
<article class="settings fliped">

.fliped {
-webkit-transform: rotateY(180deg);}

what you got is the sum of degrees, that is 360 which equals to 0! also you don't always have to specificate when a div is at 0deg since this is by default.

so here is the code i wrote, the animation triggers on hover (i commented the class involved in this).

i also added another wrapper to keep the perspective more realistic, if you dont like it just delete the very first class.

if you want to see the static backface only (as you asked) you just have to add the .hover class to the .flip-container div without messing with your css, like this:

<div class="flip-container hover" >

EDIT

i forgot about the overflow issue which is easily solved by applying the overflow:hidden; property directly to the last single container of your markup. in my case directly to .front or .back divs (or both). here is the final Fiddle updated for your needs.

background-clip: text and backface-visibility: hidden not working as per Can I Use

Both background-clip and backface-visibility work in all major browsers. The problem is that browsers such as Chrome require the -webkit prefix, whereas browsers such as Firefox merely support it.

As such, you want -webkit-background-clip: text in addition to the regular background-clip: text, and -webkit-backface-visibility: hidden in addition to backface-visibility: hidden. The former will work for Webkit browsers (like Chrome), and the latter will work with Firefox.

The following will work in both Chrome and Firefox:

p {  margin: 1em 0;  padding: 1.4em;  background: linear-gradient(60deg, red, yellow, red, yellow, red);  font: 900 1.2em sans-serif;  text-decoration: underline;}
.text {  background-clip: text;  -webkit-background-clip: text;  color: rgba(0, 0, 0, .2);}
.hidden {  transform: rotateY(180deg);  -webkit-transform: rotateY(180deg);  backface-visibility: hidden;  -webkit-backface-visibility: hidden;}

<p class="text">The background is clipped to the foreground text.</p><p class="hidden">HIDDEN</p>