【发布时间】：2019-09-13 19:20:27
【问题描述】：
我有一个“促销滚轮”，它使用 CSS 动画来旋转立方体，在任何时候都只显示立方体的四个边之一。立方体的旋转显示下一个面。
/*-- Animated Promo Roller --*/
#roller {
width: 140px;
height: 28px;
position: absolute;
}
.face1, .face2, .face3, .face4 {
font-size: 16px;
line-height: 28px;
font-weight: bold;
color: #fff;
text-align: center;
width: 140px;
height: 28px;
margin: -8px 0px 10px 157px;
position: absolute;
background: #d71e44; /* Old browsers */
background: -moz-linear-gradient(top, #d71e44 0%, #c11e44 100%); /* FF3.6+ */
background: -moz-gradient(linear, left top, left bottom, color-stop(0%,#d71e44), color-stop(100%,#c11e44)); /* Chrome,Safari4+ */
background: -moz-linear-gradient(top, #d71e44 0%,#c11e44 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d71e44 0%,#c11e44 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d71e44 0%,#c11e44 100%); /* IE10+ */
background: linear-gradient(to bottom, #d71e44 0%,#c11e44 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d71e44', endColorstr='#c11e44',GradientType=0 ); /* IE6-9 */
}
#roller .face1 {
transform: translateZ(14px);
}
#roller .face2 {
transform: rotateX(90deg) translateZ(14px);
}
#roller .face3 {
transform: rotateX(180deg) translateZ(14px);
}
#roller .face4 {
transform: rotateX(270deg) translateZ(14px);
}
@keyframes spincube {
from,to { }
0% { transform: rotateX(0deg); }
14% { transform: rotateX(0deg); }
21% { transform: rotateX(-90deg); }
35% { transform: rotateX(-90deg); }
42% { transform: rotateX(-180deg); }
70% { transform: rotateX(-180deg); }
77% { transform: rotateX(-270deg); }
91% { transform: rotateX(-270deg); }
100% { transform: rotateX(-360deg); }
}
#roller {
animation-name: spincube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 12s;
transform-style: preserve-3d;
transform-origin: 7px 7px 0;
}<div id="roller">
<div class="face1">WAS R242,900</div>
<div class="face2">NOW R227,900</div>
<div class="face3">SAVE R15,000</div>
<div class="face4">ON PROMO</div>
</div>除了在 Internet Explorer 中（目前使用 IE11 进行测试）之外，代码运行良好，在 IE11 中旋转动画运行良好。但是用于创建立方体的变换 rotateX 和 translateZ 不起作用。所以只有立方体的一面是可见的，其他 3 面隐藏在它后面。
这可以在 IE11 中工作吗？
亲切的问候
威廉
【问题讨论】：
-
我在实际网站上有供应商前缀，不幸的是它们没有任何区别。
标签： html css animation css-animations