修复高度/内容更改时的 css 3d 透视

Question

这支笔：http://codepen.io/jeremytm/pen/KzOayw

如何在不影响透视角度的情况下更改盒子的高度？

例如，如果更改高度，则顶部和底部角度与前一个角度不同。

我希望角度保持不变，只看到高度增加。

window.setInterval(function(){
  if(document.getElementById('box').className==='bigger'){
    document.getElementById('box').className = '';
  } else {
    document.getElementById('box').className = 'bigger';
  }
},1000);

#box {
  width:250px;
  margin: 50px auto;
  height:200px;
  background: tomato;
  padding: 40px;
  -webkit-transform: perspective(1000) rotateY(30deg);
  color: #6e1b0c;
}
#box.bigger {
  height:300px;
}

<div id="box">
  <h1>I am a 3d Box</h1>
  <p>But! Change my height, and my perceived angle changes too!</p>
  <p>How do we fix this for dynamic heights?</p>
</div>

更新

这是显示生产中问题的视频。第一个视图是我希望事物的外观，但是一旦我们更改为新选项卡，高度就会改变，视角也会改变。

视频

Answer 1

我在CSS中做了一些更改，而不是rotateY尝试skewY。希望这会以某种方式对您有所帮助。

window.setInterval(function(){
  if(document.getElementById('box').className==='bigger'){
    document.getElementById('box').className = '';
  } else {
    document.getElementById('box').className = 'bigger';
  }
},1000);

 
#box { width:250px;
      margin: 50px auto;
      height:200px;
      background: tomato;
      padding: 40px;
      -webkit-transform: perspective(1000) skewY(4deg);
      color: desaturate(darken(tomato,40%),20%);
    }
    #box h1, #box p {
      -webkit-transform: perspective(1000) skewY(0deg);
      /*-webkit-transform: perspective(1000) skewY(-4deg);*/
    }
    #box.bigger {
      height:300px;
    }
    #box.bigger h1, #box.bigger p {
      -webkit-transform: perspective(1000) skewY(0deg);
      /*-webkit-transform: perspective(1000) skewY(-4deg);*/
    }

<div id="box">
  <h1>I am a 3d Box</h1>
  <p>But! Change my height, and my perceived angle changes too!</p>
  <p>How do we fix this for dynamic heights?</p>
</div>