Backface-visibility not working in IE10?

Question

So I'm working on this project of mine and I'm trying to set some 3d CSS effects - I tried it on Chrome and it works great, FireFox looks awesome but IE is making me cry.

The problem is that I can't see the backside in IE10 when I hover over it. You can see it on chrome live at THIS PLACE - that's what I want it to do in IE - but how could I do that D:! I tried setting the perspective on the child elements, also the transformations but they do nothing D:!

Anyone have any ideas?

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

Here is some of the 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);
}

lloan · Accepted Answer · 2013-06-29T10:00:52.567

This ended up working for my 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 do 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: all 0.5s linear;
-ms-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 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 is that Preserve-3D doesn't work in IE. There are a few changes - Instead of making the 'card' turn, the actualy 'container = panel' is made to turn.

Backface-visibility not working in IE10?

1 Answers1