CSS 3D Carousel Elements Don't Respect TranslateZ

Question

Why doesn't the center element (with the lowest translateZvalue) always appear on top?

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

z-index issue perhaps? -- http://www.w3schools.com/cssref/pr_pos_z-index.asp — Tasos, Mar 11 '16 at 14:22
@Tasos I thought about it, but z-index seems like the wrong fix- especially if I'm trying to use a css transition on it. It should work with css-transforms, no? — rob-gordon, Mar 11 '16 at 14:27
No, translate3d and translateZ do not seem to work for stacking contexts. See a similar question here: http://stackoverflow.com/questions/17977220/can-css3-translatez-be-used-instead-of-z-index In your case, just add `&.two{ z-index: 1; }` to achieve the desired effect. — Joey M-H, Mar 11 '16 at 15:04

score 1 · Accepted Answer · answered Mar 11 '16 at 15:04

perspective-3d isn't a valid value for transform-style; it should be preserve-3d, and this should go on the container, in your case .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 Don't Respect TranslateZ

1 Answers1