歪斜的圖像

Question

的一個角落

我試圖歪曲我的DIV的背景之一單角，如下圖所示，在綠色的勾號：

在CSS3我卻無法實現那種傾斜完全扭曲了每個角落。我只想將右下角傾斜到左邊（比如25px）並保持透視（如上圖所示）。

background-image: url('http://rtjansen.nl/images/stackoverflow.png'); 
-webkit-transform: skew(-45deg); 

小提琴：http://jsfiddle.net/3eX5j/

我的代碼是：

div {  
    width: 300px; 
    height:80px; 
    margin-left:40px; 
    background-image: url('http://rtjansen.nl/images/stackoverflow.png'); 
    -webkit-transform: skew(-45deg); 
} 

Answer 1

所有你需要做的是想3D：

div {  
    width: 300px; 
    height:80px; 
    margin-left:40px; 
    background-image: url('http://rtjansen.nl/images/stackoverflow.png'); 
    -webkit-transform: perspective(100px) rotateX(-25deg); 
    -webkit-transform-origin: left center; 
    -moz-transform: perspective(100px) rotateX(-25deg); 
    -moz-transform-origin: left center; 
} 

fiddle

解釋：你正在向上旋轉元素。但是，透視（通過變換原點來處理，它是一個函數！）使得左手旋轉不會在水平移動中平移。

瞭解如何可以控制什麼是最終大小

fiddle with multiple options