由于preserve-3d，CSS 3D Carousel Internet Explorer 无法正常工作

Question

我正在尝试让一个 3 屏幕轮播在 Internet Explorer 11 中工作。我第一次遇到的问题是 ie11 不支持在父元素上使用 preserve-3d。我已将它单独应用于孩子，并且元素的位置正确。我无法解决的问题是子元素在 ie 中没有正确处理 z。在 Internet Explorer 中，它似乎尊重 z-index，其中单元格 3 始终位于顶部，然后是单元格 2，最后是单元格 1 在底部。我可以使用逻辑设置 z-index，但它在移动时看起来很糟糕。它确实为 chrome 正确设置了 z。

    var carousel = document.querySelector('.carousel');
    var cells = carousel.querySelectorAll('.carousel__cell');
    var cellCount; // cellCount set from cells-range input value
    var selectedIndex = 1;
    var cellWidth = carousel.offsetWidth;
    var cellHeight = carousel.offsetHeight;
    var isHorizontal = true;
    //cell1.style.zIndex=50;cell2.style.zIndex=-1;cell3.style.zIndex=-1;
    var radius, theta;

    
    function rotateCarousel() {
      var angle = theta * selectedIndex;
     // carousel.style.transform = 'translateZ(' + -radius + 'px) ' + 
     // 'rotateY' + '(' + angle + 'deg)';
        cell1.style.transform = 'rotateY'+ '(' + (angle-120) + 'deg)' +'translateZ(' + (radius) + 'px) ';
        //cell1.style.transform = 'rotate3d(0, 1, 0, '+(angle-120)+'deg)' +'translate3d(0, 0, ' +(radius)+'px)'
       cell2.style.transform = 'rotateY'+ '(' + (angle-0) + 'deg)' + 'translateZ(' + (radius) + 'px) ';
      //cell2.style.transform = 'rotate3d(0, 1, 0, '+angle+'deg)' +'translate3d(0, 0, ' +(radius)+'px)'
        cell3.style.transform = 'rotateY'+ '(' + (angle+120) + 'deg)' + 'translateZ(' + (radius) + 'px) ';
        //cell3.style.transform = 'rotate3d(0, 1, 0, '+(angle+120)+'deg)' +'translate3d(0, 0, ' +(radius)+'px)'

        //if((selectedIndex % 3) ==1){
        //cell1.style.zIndex=5;cell2.style.zIndex=-1;cell3.style.zIndex=-1;} else if ((selectedIndex % 3) == 2){
        //cell1.style.zIndex=-1;cell2.style.zIndex=-1;cell3.style.zIndex=5;} else if ((selectedIndex % 3) == 0){
       // cell1.style.zIndex=-1;cell2.style.zIndex=5;cell3.style.zIndex=-1;}
        
        }
    
    var prevButton = document.querySelector('.previous-button');
    prevButton.addEventListener( 'click', function() {
      selectedIndex--;
      rotateCarousel();
    });
    
    var nextButton = document.querySelector('.next-button');
    nextButton.addEventListener( 'click', function() {
      selectedIndex++;
      rotateCarousel();
    });
    
    
    
    function changeCarousel() {
      theta = 360 / 3;
      radius = Math.round( ( cellWidth / 2) / Math.tan( Math.PI / 3 ) );
      var cellAngle = theta ;
      cell1.style.transform = 'rotateY'+ '(' + (cellAngle-120) + 'deg)' +'translateZ(' + radius + 'px) ';
        cell2.style.transform = 'rotateY'+ '(' + (cellAngle+0) + 'deg)' + 'translateZ(' + radius + 'px) ';
        cell3.style.transform = 'rotateY'+ '(' + (cellAngle+120) + 'deg)' + 'translateZ(' + radius + 'px) ';
      for ( var i=0; 3; i++ ) {
        var cell = cells[i];
        if ( i < 3 ) {
          // visible cell
          cell.style.opacity = 1;
          
         // cell.style.transform = 'rotateY' + '(' + cellAngle + 'deg) translateZ(' + radius + 'px)';
         
        } else {
          // hidden cell
          cell.style.opacity = 0;
          cell.style.transform = 'none';
        }
      }
    
      rotateCarousel();
    }
    changeCarousel();

* { box-sizing: border-box; }

body {
  font-family: sans-serif;
  text-align: center;
}

.scene {
  border: 1px solid #CCC;
  margin: 40px 0;
  position: relative;
  width: 210px;
  height: 140px;
  margin: 80px auto;
  perspective: 1000px;
}

.carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateZ(-288px);
  transform-style: preserve-3d;
  transition: transform 1s;
}

.carousel__cell {
  position: absolute;
  width: 190px;
  height: 120px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
  line-height: 116px;
  font-size: 80px;
  font-weight: bold;
  color: white;
  text-align: center;
  transition: transform 1s, opacity 1s;
}

.carousel__cell:nth-child(1) { background: hsla(  0, 100%, 50%, 1);}
.carousel__cell:nth-child(2) { background: hsla( 40, 100%, 50%, 1);}
.carousel__cell:nth-child(3) { background: hsla( 80, 100%, 50%,1);}
.carousel-options {
  text-align: center;
  position: relative;
  background: hsla(0, 0%, 100%, 0.8);
}

<!DOCTYPE html>

<html>
<head>
  <title>carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div class="scene">
    <div class="carousel">
      <div id ="cell1" class="carousel__cell">1</div>
      <div id ="cell2" class="carousel__cell">2</div>
      <div id ="cell3" class="carousel__cell">3</div>
    </div>
  </div>
  
  <div class="carousel-options">
      <button class="previous-button">Previous</button>
      <button class="next-button">Next</button>
  </div>
</body>

Answer 1

IE 无法正确处理 z-index，因为 IE doesn't support transform-style: preserve-3d。即使您使用 JavaScript 设置 z-index，它在移动时看起来也不同，因为它在 IE 中是扁平的而不是 3D。

为了让它在 IE 中具有透视效果并看起来像 3D，我们需要在 .carousel 中添加 perspective: 1000px。另外，当我们在IE中使用JavaScript设置z-index时，需要考虑到selectedIndex可能是负数。

所以最终的代码示例如下所示，它是 IE 中最接近 Chrome 的版本。我认为我们不能让它与 Chrome 完全一样，因为 IE 对 3D 转换的支持很差。或许你可以在 IE 中显示一条横幅信息，通知用户使用其他浏览器以获得更好的体验。

var carousel = document.querySelector('.carousel');
var cells = carousel.querySelectorAll('.carousel__cell');
var cellCount;
var selectedIndex = 1;
var cellWidth = carousel.offsetWidth;
var cellHeight = carousel.offsetHeight;
var isHorizontal = true;
cell1.style.zIndex = 50;
cell2.style.zIndex = -1;
cell3.style.zIndex = -1;
var radius, theta;


function rotateCarousel() {

  var angle = theta * selectedIndex;
  cell1.style.transform = 'rotateY' + '(' + (angle - 120) + 'deg)' + 'translateZ(' + (radius) + 'px) ';
  cell2.style.transform = 'rotateY' + '(' + (angle - 0) + 'deg)' + 'translateZ(' + (radius) + 'px) ';
  cell3.style.transform = 'rotateY' + '(' + (angle + 120) + 'deg)' + 'translateZ(' + (radius) + 'px) ';

  //add the part if selectedIndex is negative number
  if (((selectedIndex % 3) == 1) || ((selectedIndex % 3) == -2)) {
    cell1.style.zIndex = 5;
    cell2.style.zIndex = -1;
    cell3.style.zIndex = -1;
  } else if (((selectedIndex % 3) == 2) || ((selectedIndex % 3) == -1)) {
    cell1.style.zIndex = -1;
    cell2.style.zIndex = -1;
    cell3.style.zIndex = 5;
  } else if ((selectedIndex % 3) == 0) {
    cell1.style.zIndex = -1;
    cell2.style.zIndex = 5;
    cell3.style.zIndex = -1;
  }

}

var prevButton = document.querySelector('.previous-button');
prevButton.addEventListener('click', function() {
  selectedIndex--;
  rotateCarousel();
});

var nextButton = document.querySelector('.next-button');
nextButton.addEventListener('click', function() {
  selectedIndex++;
  rotateCarousel();
});



function changeCarousel() {
  theta = 360 / 3;
  radius = Math.round((cellWidth / 2) / Math.tan(Math.PI / 3));
  var cellAngle = theta;
  cell1.style.transform = 'rotateY' + '(' + (cellAngle - 120) + 'deg)' + 'translateZ(' + radius + 'px) ';
  cell2.style.transform = 'rotateY' + '(' + (cellAngle + 0) + 'deg)' + 'translateZ(' + radius + 'px) ';
  cell3.style.transform = 'rotateY' + '(' + (cellAngle + 120) + 'deg)' + 'translateZ(' + radius + 'px) ';
  for (var i = 0; 3; i++) {
    var cell = cells[i];
    if (i < 3) {
      cell.style.opacity = 1;
    } else {
      cell.style.opacity = 0;
      cell.style.transform = 'none';
    }
  }

  rotateCarousel();
}
changeCarousel();

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  text-align: center;
}

.scene {
  border: 1px solid #CCC;
  margin: 40px 0;
  position: relative;
  width: 210px;
  height: 140px;
  margin: 80px auto;
  perspective: 1000px;
}

.carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateZ(-288px);
  transform-style: preserve-3d;
  transition: transform 1s;
  perspective: 1000px; /*added*/
}

.carousel__cell {
  position: absolute;
  width: 190px;
  height: 120px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
  line-height: 116px;
  font-size: 80px;
  font-weight: bold;
  color: white;
  text-align: center;
  transition: transform 1s, opacity 1s;
}

.carousel__cell:nth-child(1) {
  background: hsla( 0, 100%, 50%, 1);
}

.carousel__cell:nth-child(2) {
  background: hsla( 40, 100%, 50%, 1);
}

.carousel__cell:nth-child(3) {
  background: hsla( 80, 100%, 50%, 1);
}

.carousel-options {
  text-align: center;
  position: relative;
  background: hsla(0, 0%, 100%, 0.8);
}

<div class="scene">
  <div class="carousel">
    <div id="cell1" class="carousel__cell">1</div>
    <div id="cell2" class="carousel__cell">2</div>
    <div id="cell3" class="carousel__cell">3</div>
  </div>
</div>

<div class="carousel-options">
  <button class="previous-button">Previous</button>
  <button class="next-button">Next</button>
</div>