Javascript 3D-карусель не работает должным образом в Internet Explorer

Question

Я работаю над сайтом для клиента, который хочет 3D-карусель. Я нашел, который отлично работает в Chrome и FF: http://codepen.io/dudleystorey/pen/kiajB

HTML:

<div id=carousel> 
<figure id=spinner> 
<img src=//demosthenes.info/assets/images/wanaka-tree.jpg alt=""> 
<img src=//demosthenes.info/assets/images/still-lake.jpg alt=""> 
<img src=//demosthenes.info/assets/images/pink-milford-sound.jpg alt=""> 
<img src=//demosthenes.info/assets/images/paradise.jpg alt=""> 
<img src=//demosthenes.info/assets/images/morekai.jpg alt=""> 
<img src=//demosthenes.info/assets/images/milky-blue-lagoon.jpg alt=""> 
<img src=//demosthenes.info/assets/images/lake-tekapo.jpg alt=""> 
<img src=//demosthenes.info/assets/images/milford-sound.jpg alt=""> 
</figure> 
</div> 
<span style=float:left class=ss-icon onclick="galleryspin('-')">&lt;</span> 
<span style=float:right class=ss-icon onclick="galleryspin('')">&gt;</span> 

CSS:

div#carousel { 
    perspective: 1200px; 
    background: #100000; 
    padding-top: 10%; 
    font-size:0; 
    margin-bottom: 3rem; 
    overflow: hidden; 
} 
figure#spinner { 
    transform-style: preserve-3d; 
    height: 300px; 
    transform-origin: 50% 50% -500px; 
    transition: 1s; 
} 
figure#spinner img { 
    width: 40%; max-width: 425px; 
    position: absolute; left: 30%; 
    transform-origin: 50% 50% -500px; 
    outline:1px solid transparent; 
} 
figure#spinner img:nth-child(1) { transform:rotateY(0deg); 
} 
figure#spinner img:nth-child(2) { transform: rotateY(-45deg); } 
figure#spinner img:nth-child(3) { transform: rotateY(-90deg); } 
figure#spinner img:nth-child(4) { transform: rotateY(-135deg); } 
figure#spinner img:nth-child(5){ transform: rotateY(-180deg); } 
figure#spinner img:nth-child(6){ transform: rotateY(-225deg); } 
figure#spinner img:nth-child(7){ transform: rotateY(-270deg); } 
figure#spinner img:nth-child(8){ transform: rotateY(-315deg); } 
div#carousel ~ span { 
    color: #fff; 
    margin: 5%; 
    display: inline-block; 
    text-decoration: none; 
    font-size: 2rem; 
    transition: 0.6s color; 
    position: relative; 
    margin-top: -6rem; 
    border-bottom: none; 
    line-height: 0; } 
div#carousel ~ span:hover { color: #888; cursor: pointer; } 

JS:

var angle = 0; 
function galleryspin(sign) { 
spinner = document.querySelector("#spinner"); 
if (!sign) { angle = angle + 45; } else { angle = angle - 45; } 
spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);"); 
} 

К сожалению, это катастрофа IE11. Я искал в Интернете помощь, но кажется, что все управляется последними версиями IE, поэтому я немного смущен. У меня нет большого опыта работы с javascript и css, для меня все выглядит нормально. Помогает ли кто-нибудь?

Answer 1

Наиболее вероятная причина, по которой ваша функция не работает в IE, связана с правилом transform-style: preserve-3d;, применяемым к figure#spinner1.

Поддержка IE для CSS3 3D улучшена, но согласно caniuse IE10 и 11 по-прежнему не поддерживают эту особенность API преобразования 3D. Когда я удаляю правило из вашего CSS, я вижу, что вся 3D-макет терпит неудачу, когда эта функция отсутствует.

Возможно, существует другой способ вложения и форматирования ваших 3D-объектов, которые достигнут того же визуального эффекта без «сохранения-3d», но это, вероятно, будет намного сложнее, чем реализация, которую вы сейчас имеете.

Еще один вариант, который вы можете использовать, - использовать threejs и WebGL для обработки 3D-карусели, когда необходимо. CSS-атрибуты 3D недоступны в целевом браузере.