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

Question

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

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

例如，如果您更改高度，则顶 Angular 和底 Angular 将与之前的不同。

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

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>

更新

这是一段显示生产中问题的视频。第一个 View 是我希望的样子，但是一旦我们切换到新选项卡，高度就会改变，视角也会改变。

Video

Answer 1

I've made some changes in CSS, instead of rotateY try skewY. Hope this will help you in some way.

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>