I am looking to incorporate a CSS 3D effect into a website. I have successfully implemented it on all browsers except Internet Explorer (including IE 11). As far as I know, IE does not support preserve-3d. Can someone help me add a fallback option for IE, such as a fade or slide upwards transition?
Below is the code snippet:
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>