當高度/含量的變化

此筆修復CSS 3D透視： 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>

更新

這裏是在生產中的問題的視頻。第一種觀點是我希望看到的東西，但只要我們切換到新選項卡，高度就會改變，透視也會改變。

Video

來源

2016-05-23 JeremyTM

問題是不明確的，你[R試圖做什麼？ –

@Ajai Krishnan R看看例子中的方框。更具體地說，在盒子頂部的角度。假設它處於10度的坡度。請注意，僅僅因爲盒子變大，它會如何變成一個新的角度呢？我希望能夠使盒子儘可能高，而不會改變角度 - 否則，如果盒子太高，內容會變得過於傾斜和不可讀。這有幫助嗎？如果沒有，我會提供我的實際項目的一些屏幕。 – JeremyTM

我在原帖中添加了一段視頻，該視頻應該進一步解釋說明。 – JeremyTM

我做的CSS一些變化，而不是旋轉Y的嘗試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>

來源

2016-05-23 08:09:44

這很完美！非常感謝:) – JeremyTM

聽起來不錯:) –

當高度/含量的變化

回答

相關問題