我將如何反轉一個CSS轉換屬性的寬度？

Question

所以我想製作一個css動畫屬性，其寬度向左延伸，但它總是向右延伸。我正在嘗試計算如何使寬度向左延伸而不是默認的右側。我應該如何處理這個問題？的jsfiddle下面
Jsfiddle

HTML：<div></div>

的CSS：

div 
{ 
    position:absolute; 
    bottom:130px; 
    left:130px; 
    width:100px; 
    height:100px; 
    background:red; 
    -webkit-transition:width 2s; 
} 

div:hover 
{ 
    width:200px; 
} 

Answer 1

調整left值，以及：

Updated Fiddle

div { 
    position:absolute; 
    bottom:130px; 
    left:130px; 
    width:100px; 
    height:100px; 
    background:red; 
    -webkit-transition:left 2s, width 2s; 
} 
div:hover { 
    left:30px; 
    width:200px; 
} 

Answer 2

你需要重寫你的左側爲了擴大d寬度向左。 您已使用left:130px;是您div的起點。而就div:hover你還是沒有改變左邊，這樣它會自動延伸到右側，你也設置了bottom:130px;

您的默認width:100px;的變化對div:hover到width:200px;所以你需要減少對div:hover左邊起始位置。這是一個Demo。

div { 
    position:absolute; 
    bottom:130px; 
    left:130px; 
    width:100px; 
    height:100px; 
    background:red; 
    -webkit-transition:left 2s, width 2s; 
} 
div:hover { 
    left:30px; 
    width:200px; 
}