CSS卡鳍片不会在Internet Explorer中显示

时间:2014-08-10 04:15:58

标签: css flipper

我环顾四周寻找解决方案,但尚未找到它。我有配置文件卡,可以在Chrome和Firefox中使用,但在Internet Explorer中,我仍然无法获得显示。这里是codepen,这里是CSS代码:

body {
background: #f5f5f5;
color:#999;
font-size:12px;font-weight:bold;
font-family: 'Open Sans', 'Trebuchet MS', sans-serif;
margin: 2em;
}
.body_m {background:rgba(156,74,59,0.8);}
img {border-radius:50%; height:150px;box-shadow: 0px 0px 0px #ee9b05;}
.sub { width:100%; position:absolute; background:#b8b543; height:30px; text-align:center;color:white; padding-bottom:15px;font-size:16px; line-height:8pt;font-weight:bold; margin-top:14px; }
#titulo { width:100%; position:absolute; background:white; height:30px; text-align:center;color:#ee9b05; padding-top:10px;padding-bottom:0px;font-size:18px;line-height:13pt; font-weight:bold;}
#title {width:100%; position:absolute; text-align:left;color:black; font-size:11px; font-weight:bold;}

.flip-container {
margin: 0 auto;
-webkit-perspective: 1000;
-moz-perspective: 1000;
}

.flip-container:hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}

.flipper {
background:#fff;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
-ms-backface-visibility: hidden;
position: relative;
}

.front, .back {border-radius: 9px;
box-shadow: 0px 0px 20px #111111; 
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}

.front {
text-align:center;
padding-top:20px;
padding-bottom:0px;
background:white;
z-index:1
}

.flip-container, .front, .back {
width: 17.5em;
height: 19.5em;
}

.back {
background:#b8b543;
padding-top:20px;
padding-bottom:0px;
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
}

.back p {
margin-left:15px;
margin-right:15px;
color: white;font-weight:300;
}

/*blur*/

.blurry {
-webkit-filter: blur(7px);
filter: blur(7px);
-webkit-transform: translateY(0px)
                 translate3d(0,0,0);
}

0 个答案:

没有答案