css变换求解translateZ

Question

我正在使用这个例子，http://jsfiddle.net/k1m045uu/（代码也发布在下面），当我改变容器的高度和宽度时，我很难搞清楚translateZ。图像。

我看过一些帖子解释了translateZ背后的计算，但有些人可以通过链接到示例以及高度1300px和宽度2000px 来帮我看。

任何帮助都可能让我免于数小时的挫折。希望有人能帮助我。

var elements = $('.face');
var rotates = [0, 72, 144, 216, 288];

function rotate(deg) {
  elements.each(function(index) {
    rotates[index] = rotates[index] + deg;
    $(this).css('transform', 'perspective(1000px) rotateY(' + rotates[index] + 'deg) translateZ(95px)');
  });
}

    #Carousel {
      display: block;
      margin: 100px auto 20px auto;
    }
    #Spinner {
      position: relative;
      margin: 0 auto;
      height: 1300px;
      width: 2000px;
    }
    #Carousel .face {
      position: absolute;
      height: 1300px;
      width: 2000px;
      transform-origin: 50% 50% -250px;
      transition: all 1.0s ease-in-out;
    }
    #Carousel img {
      width: 2000px;
      box-shadow: 0 0 0 1px #000;
    }
    #Spinner .f0 {
      transform: perspective(1000px) rotateY(0deg) translateZ(95px);
    }
    #Spinner .f1 {
      transform: perspective(1000px) rotateY(72deg) translateZ(95px);
    }
    #Spinner .f2 {
      transform: perspective(1000px) rotateY(144deg) translateZ(95px);
    }
    #Spinner .f3 {
      transform: perspective(1000px) rotateY(216deg) translateZ(95px);
    }
    #Spinner .f4 {
      transform: perspective(1000px) rotateY(288deg) translateZ(95px);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href=# onclick="rotate(-72);">Previous</a>&nbsp;<a href=# onclick="rotate(+72);">Next</a>
<div id="Carousel">
  <div id="Spinner">
    <img class="face f0" src="img/test1.jpg" />
    <img class="face f1" src="img/test2.jpg" />
    <img class="face f2" src="img/test3.jpg" />
    <img class="face f3" src="img/test4.jpg" />
    <img class="face f4" src="img/test5.jpg" />
  </div>
</div>