圍繞它的中心樞軸點改變div的比例

Question

我在閱讀關於jQuery的scale effect，但我似乎無法得到它的工作。

我想要做的就是將div的原始大小縮放到其中心軸上的90％，並在用戶懸停時將其不透明度降低到80％，然後在鼠標離開div時將其恢復。

Answer 1

這裏是如何使用css做到這一點：

#yourDiv 
{ 
    width:20px; 
    height:20px; 
    opacity:1; 
    filter:alpha(opacity=100); 
    -webkit-transition: all 0.5s ease-in-out; 
      transition: all 0.5s ease-in-out; 
} 
#yourDiv:hover 
{ 
    width:30px; 
    height:30px; 
    opacity:0.8; 
    filter:alpha(opacity=80); 
} 

或者，你可以使用transform功能：

#yourDiv 
{ 
    width:20px; 
    height:20px; 
    opacity:1; 
    filter:alpha(opacity=100); 
    -webkit-transform: scale(1,1); 
     -ms-transform: scale(1,1); 
      transform: scale(1,1); 
    -webkit-transition: all 0.5s ease-in-out; 
      transition: all 0.5s ease-in-out; 
} 
#yourDiv:hover 
{ 
    -webkit-transform: scale(1.2,1.2); 
     -ms-transform: scale(1.2,1.2); 
      transform: scale(1.2,1.2); 
    opacity:0.8; 
    filter:alpha(opacity=80); 
} 

繼承人的小提琴：https://jsfiddle.net/o3whjz33/5/

更新：作爲你可以看到transform更優雅。但請確保您添加瀏覽器前綴以確保它適用於所有人。

pleeease.io/play - 該網站做了很好的自動添加前綴。乾杯。

更新2：可以爲單獨的屬性而不是所有指定的'過渡性質，像這樣：

transition: opacity 0.5s ease-in-out; 
transition: transform 0.2s ease-in-out; 

你可以閱讀更多有關transform和transitionhere和here

Answer 2

不透明度懸停ypu可以使用:hover

#toggle { 
width: 100%; 
height: 100px; 
background: #000; 
opacity:1;  
} 
#toggle:hover { 
opacity:0.8; 
} 


<div id="toggle"></div> 

並減少點擊寬度您可以使用JavaScript

$(document).click(function() { 
$("#toggle").css({  
    "width": "90%", 
    "margin-left":"5%" 
}); 
}); 

fiddle