Question

我想将CSS 3d效果实现到网站中。除了Internet Explorer（包括IE 11）之外，我已经开始研究它了。如果我是正确的，IE不支持preserve-3d？是否有人能够帮助我实现代码的回退，IE可以使用像淡入淡出或向上滑动过渡的代码？

这是代码。

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

您可以使用此媒体查询来定位IE，请注意此媒体查询将同时针对IE 10和11. -ms-high-contrast是仅在IE上可用的设置，因此此查询仅针对IE。

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

当然，对于较低版本的IE，您可以使用条件注释。

Internet Explorer的CSS后备

1 个答案: