Question

为什么中心元素（具有最低translateZ值）始终显示在顶部？

<div class="carousel">
  <div class="item one">hello</div>
  <div class="item two">hello</div>
  <div class="item three">hello</div>
</div>

$height: 200px;

.carousel {
  display: block;
  position: relative;
  width: 100%;
  height: $height;
  perspective: 800px;
}

.item {
  height: $height;
  width: 50%;
  display: block;
  position: absolute;
  transform-style: perspective-3d;
  transition: all 500ms linear;
  backface-visibility: hidden;

  &:nth-child(1) {
    background: red;

  }
  &:nth-child(2) {
    background: green;

  }
  &:nth-child(3) {
    background: blue;

  }

  &.one {
    transform: translateX(0%) translateZ(-100px);
  }
  &.two {
    transform: translateX(50%) translateZ(0px);
  }
  &.three { 
    transform: translateX(100%) translateZ(-100px);
  }
}

Number.prototype.mod = function(n) {
    return ((this%n)+n)%n;
};

setInterval(function() {
  var left = $('.one'), 
    center = $('.two'), 
     right = $('.three');
  $(left).removeClass('one').addClass('two');
  $(center).removeClass('two').addClass('three');
  $(right).removeClass('three').addClass('one');
}, 2000);

Answer 1

perspective-3d不是transform-style的有效值;它应该是preserve-3d，这应该放在容器上，在您的情况下.carousel

Number.prototype.mod = function(n) {
    return ((this%n)+n)%n;
};

setInterval(function() {
  var left = $('.one'), 
    center = $('.two'), 
     right = $('.three');
  $(left).removeClass('one').addClass('two');
  $(center).removeClass('two').addClass('three');
  $(right).removeClass('three').addClass('one');
}, 2000);

.carousel {
  display: block;
  position: relative;
  width: 100%;
  height: 200px;
  perspective: 800px;
  transform-style: preserve-3d; /* <---- need this on container for 3d */
}

.item {
  height: 200px;
  width: 50%;
  display: block;
  position: absolute;
  /* transform-style: perspective-3d; <---- not valid value */
  transition: all 500ms linear;
  backface-visibility: hidden;
}

.item:nth-child(1) {
    background: red;

  }
.item:nth-child(2) {
    background: green;

  }
.item:nth-child(3) {
    background: blue;

  }

.item.one {
    transform: translateX(0%) translateZ(-100px);
  }
.item.two {
    transform: translateX(50%) translateZ(0px);
  }
.item.three { 
    transform: translateX(100%) translateZ(-100px);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
  <div class="item one">hello</div>
  <div class="item two">hello</div>
  <div class="item three">hello</div>
</div>

CSS 3D Carousel Elements不尊重TranslateZ

1 个答案: