如何圖像形狀動畫成梯形，希望使用jQuery插件

Question

我試圖讓一個動畫，將改變方形圖像變成了「側身梯形」。像這樣： http://i.stack.imgur.com/QRtgz.png（忽略0和1）

我一直在尋找像一個簡單而輕鬆的jQuery插件瘋狂，但沒有太多即將到來。我寧願堅持讓jquery使其與許多瀏覽器兼容，但我願意接受CSS替代方案？

預先感謝

Answer 1

.skewed { 
    transform: perspective(500px) rotateY(45deg); 
    -webkit-transform: perspective(500px) rotateY(45deg); 
    -moz-transform: perspective(500px) rotateY(45deg); 
    -ms-transform: perspective(500px) rotateY(45deg); 
    -o-transform: perspective(500px) rotateY(45deg); 
} 

http://jsfiddle.net/43gLv/

• 旋轉Y旋轉Y軸
• 透視使得它呈現爲與觀看者N A 3D透視元件（垂直軸）N度像素距離

---

執行動畫（轉換）。

.skewed { 
    transition: all 2s ease; 
    -webkit-transition: all 2s ease; 
    -moz-transition: all 2s ease; 
    -ms-transition: all 2s ease; 
    -o-transition: all 2s ease; 
} 
.skewed:hover { 
    transform: perspective(500px) rotateY(45deg); 
    -webkit-transform: perspective(500px) rotateY(45deg); 
    -moz-transform: perspective(500px) rotateY(45deg); 
    -ms-transform: perspective(500px) rotateY(45deg); 
    -o-transform: perspective(500px) rotateY(45deg); 
} 

http://jsfiddle.net/43gLv/2/

編輯要只是縮小一個邊緣使用變換原點

transform-origin: left center 0; 
-webkit-transform-origin: left center 0; 
-moz-transform-origin: left center 0; 
-ms-transform-origin: left center 0; 
-o-transform-origin: left center 0; 

http://jsfiddle.net/43gLv/3/

Answer 2

我覺得這是您所要求的內容：推回左上角將右下角靠近的角落。

<div class="perspective"><div class="square">the square</div></div> 

.perspective{ 
    -webkit-perspective : 800px 
} 
.square{ 
    margin: 20px; 
    -webkit-transform-origin: center center; 
    -webkit-transition: all 1s ease; 
    width:100px; 
    height:100px; 
    background:#AAA; 
} 
.square:hover{ 
    -webkit-transform: rotateX(-5deg) rotateZ(5deg) rotateY(-5deg); 
} 

實施例（在DIV懸停）：

http://jsfiddle.net/ewGWj/17/

誇張的例子：

http://jsfiddle.net/ewGWj/18/