CSS Transform RotateX не работает в IE11 - PullRequest
Новая
       36

CSS Transform RotateX не работает в IE11

0 голосов
/ 30 января 2019

У меня есть «промо-ролик», который использует CSS-анимацию для вращения куба, показывая только одну из четырех сторон куба в любой момент времени.Вращение куба показывает следующую сторону.

HTML: 

<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>

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;
}

Пожалуйста, взгляните на код в этом JSFiddle:
https://jsfiddle.net/c1mnfr2t/

Код работает отлично, за исключением Internet Explorer (в настоящее время тестируется с IE11), в IE11 вращательная анимация работает нормально.Но transform rotateX и translateZ, используемые для создания куба, не работают.Таким образом, видна только одна сторона куба, за ней спрятаны 3 другие стороны.

Можно ли это сделать для работы в IE11?

С уважением
Виллем

...