Why does hidden latent visibility not work in IE10 when perspective is applied to parent elements?

Question

So here is another IE10 glitch. The problem is that applying perspective to parent elements violates the hidden setting of hidden visibility. Check out this script: http://jsfiddle.net/2y4eA

When you hover over the red square, it rotates 180 ° along the x axis, and although the visibility of the back surface is hidden, the back side is displayed, at least until it reaches 180 °, then it disappears.Remove the perspective property and you will see that it works as expected, the reverse side is not visible at all, but, of course, the 3D effect is lost.

You can work around this problem by applying the perspective in the transform property: http://jsfiddle.net/M2pyb But this will cause communication problems with transform-origin-z, when z is set to everything but 0, everything becomes "scaled": http: //jsfiddle.net/s4ndv , unfortunately, this is not a solution.

The visible thing is most likely a mistake? If so, is there any employment other than what I mentioned?

Answer 1

I also ran into this failure, and it is definitely a failure.

The workaround is to apply the perspective transform of the child. I updated your fiddle here: http://jsfiddle.net/jMe2c/

.item { backface-visibility: hidden; transform: perspective(200px) rotateX(0deg); } .container:hover .item { transform: perspective(200px) rotateX(180deg); } 

(See also the answer at https://stackoverflow.com/a/167379/ )

I think this is because in IE 10 the parent element of the 3d property does not propagate to the child element. This is a known unsupported feature. Check out http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property :

Internet Explorer 10 does not currently support the save-3d keyword. You can get around this by manually applying the parent element transformation to each of the child elements in addition to the normal child element transformation.

So the Microsoft recommended solution is to manually distribute your 3D properties yourself.

Answer 2

I fought for hours. this is the only solution for me: http://www.cssplay.co.uk/menu/css3-3d-card.html

Answer 3

The workaround that I would have imagined is to add a transition for opacity, having 0 time interval and having a delay of half your promising transition.

 .container, .item { width: 200px; height: 200px; opacity:1; } .container { perspective: 200px; } .container:hover .item { transform: rotateX(180deg); opacity:0; } .item { background-color: #ff0000; backface-visibility: hidden; transition: transform 3000ms, opacity 0ms 1500ms; } 

Answer 4

I would suggest stopping the fight with IE using the perspective property set on all converted elements, and start testing to support save-3d. I followed this guy to extend Modernizr with a property test: https://coderwall.com/p/qctclg?comment=This+was+awesome%21+And+exactly+what+i+needed.+Thanks%21 +

thus, it can be made redundant for IE, which does not have the implementation of 3D transformations, and start playing with more advanced features in other browsers.

otherwise, IE will make your code too confusing and yet it will not give you the same capabilities as rotating polyhedral 3D objects.

.. only my 2 cents.

Answer 5

I implemented the solution suggested by @torbonaut and @chowey in this jsfiddle

HTML

 <div id='container'> <div class='backhide bottom'>bottom</div> <div class='backhide top'>top</div> </div> 

CSS

  #container, .bottom, .top { width: 200px; height: 300px; position: absolute; -webkit-transition: 1.5s ease-in-out; -moz-transition: 1.5s ease-in-out; -ms-transition: 1.5s ease-in-out; -o-transition: 1.5s ease-in-out; transition: 1.5s ease-in-out; } .backhide{ -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #container:hover .bottom { -moz-transform: perspective(800px) rotateY(0); -webkit-transform: perspective(800px) rotateY(0); transform: perspective(800px) rotateY(0); } #container:hover .top { -webkit-transform: perspective(800px) rotateY(-180deg); -moz-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); } .bottom { background-color: #ff0000; -moz-transform: perspective(800px) rotateY(180deg); -webkit-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } .top { background-color: #e0e0e0; -moz-transform: perspective(800px) rotateY(0deg); -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); }