Internet Explorer 的 CSS 回退方案

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>

- user3704608

---

如果你只想针对IE浏览器进行操作，你可以使用条件注释，因为只有IE浏览器会响应它们。 - ArtOfCode

IE11已经移除了条件注释，我相信。 - Braders

你可以使用 modernizr 来检测浏览器是否支持 preserve-3d，如果不支持，则应用另一种动画。 - Steve Sanders

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，您可以使用条件注释。

- Anwardo

---

但这样不会同时针对Edge（包括Edge Chromium）吗？ - Bill Keese