translateZ()函数与perspective视角关系实例页面

展示

代码

• HTML：

  <p>舞台元素视角大小201像素，子元素此时translateZ值为: <output id="output">0px</output></p>
  -100<input type="range" min="-100" max="300" step="10" value="0">300
  <div class="container">
      <div id="target" class="target"></div>
  </div>

• CSS：

  .container {
      perspective: 201px;
      margin: 0 1rem;
      border: solid deepskyblue;
      background-color: #f0fcff;
  }
  .target {
      width: 100px; height: 100px;
      background-color: rgba(255, 0, 0, .6);
      transform: translateZ(0);
      pointer-events: none;
      margin: 50px auto;
  }

• JS：

  var eleRange = document.querySelector('input[type="range"]');
  eleRange.addEventListener('input', function () {
      output.innerHTML = this.value + 'px';
      target.style.transform = 'translateZ('+ this.value +'px)';
  });