Internet Explorer的CSS后备

Question

I am wanting to implement the CSS 3d Effect into a website. I have got it working on everything but Internet explorer (including IE 11). IE does not support preserve-3d if I am correct? Would someone be able to help me implement a fallback into the code that IE can use something like a fade or a slide upwards transition?

Here is the code.

CSS

.cube {
width: 100%;
text-align: center;
margin: 0 auto;
height: 200px;
-webkit-transition: -webkit-transform .43s;
transition: transform .43s; 
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;

}

.cube:hover {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg); 


.before,.after {
background: rgb(247, 247, 247);
border: 4px solid rgba(147, 184, 189, .0);
height: 200px;
padding: 20px;
cursor: pointer;
}

.before {
font-family: 'OpenSansLight';
font-size: 28px;
letter-spacing: 0.5px;
line-height: 40px;
margin-top: 10px;
margin-bottom: 10px;
color: #444444;
border: 2px solid #EFEFEF;
background: #ffffff;
-webkit-transform: translateZ(110px);
transform: translateZ(110px);
}

.after {
font-family: 'OpenSansLight';
font-size: 16px;
letter-spacing: 0.5px;
line-height: 30px;
margin-top: 10px;
margin-bottom: 10px;
color: #f8f8f8;
background: #CF222D;
Border-bottom: 8px solid #b81a24;
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
-webkit-transform: rotateX(-90deg) translateZ(-110px);
transform: rotateX(-90deg) translateZ(-110px);
}

HTML

<div class="cube">
<div class="before">'
<strong>Before</strong>
</div>
<div class="after">
<strong>After</strong>
</div>
</div>

Answer 1

You can use this media query to target IE, note that this media query will target both IE 10 and 11. -ms-high-contrast is a setting only available on IE so therefore this query will only target IE.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

Of course for lower version of IE you can use conditional comments.