html - Backface-visibility not working in IE10? -

so i'm working on project of mine , i'm trying set 3d css effects - tried on chrome , works great, firefox looks awesome ie making me cry.

the problem can't see backside in ie10 when hover on it. can see on chrome live @ this place - that's want in ie - how d:! tried setting perspective on child elements, transformations nothing d:!

anyone have ideas?

i tried this it's still not working, unless read wrong of course.

here of css

.panel { position: relative; -webkit-perspective: 800px; -ms-perspective: 800px; -moz-perspective: 800px; } #card { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transition: transform 1s; -ms-transition: transform 1s; -moz-transition: transform 1s; } #card figure { display: block; position: relative; width: 100%; height: 100%; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -moz-backface-visibility: hidden; } #card .front { background: red; } #card img { display: block; width: 100%; margin: auto; } #card .back { background: blue; padding: 5px; -webkit-transform: rotatey( 180deg ); -ms-transform: rotatey(180deg); -moz-transform: rotatey(180deg); } #card:hover{ -webkit-transform: rotatey( 180deg ); -ms-transform: rotatey(180deg); -moz-transform: rotatey(180deg); } 

this ended working problem ->

demo here - demo

html

<div class="panel">         <div class="card front">           <img src="images/panel.svg" height="100%" width="100%"  />         </div>          <div class="card back">           <h4>user experience</h4>           <p >           "lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."           </p>         </div>          </div> 

css

.panel { -webkit-perspective: 1000; -ms-perspective: 1000; -moz-perspective: 1000; perspective: 1000; } .panel, .card { width: 80%; height: 80%; position:absolute; top:0; left:0; background-color: #fff; } .card { -webkit-transition: 0.5s linear; -ms-transition: 0.5s linear; -moz-transition: 0.5s linear; transition: 0.5s linear; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .grid_4 .back { position: relative; text-align:center; min-height: 100%;height: auto !important; width: 100%; -ms-transform: rotatey(180deg); -webkit-transform: rotatey(180deg); -moz-transform: rotatey(180deg); transform: rotatey(180deg); } .panel:hover .card { -webkit-transform: rotatey(360deg); -ms-transform: rotatey(360deg); -moz-transform: rotatey(360deg); transform: rotatey(360deg); } 

problem apparently preserve-3d doesn't work in ie. there few changes - instead of making 'card' turn, actualy 'container = panel' made turn.