CSS縮放轉換緩解不起作用

Question

所以我一直想要在博客上的圖標上進行這種縮放轉換。並且易於進入正常工作，但不是緩解......我讀了一些東西，但沒有一個是關於尺度轉換的，所以我一直很難將其應用到我的案例中。 希望你能幫我感謝 這裏是我的代碼：

#avatar { 
 
margin:auto; 
 
margin-top:15px; 
 
width:50px; 
 
height:50px; 
 
border-radius:60px; 
 
border:0px solid {color:Main icon background}; 
 
z-index:10; 
 
} 
 
    
 
#avatar img { 
 
width:100%; 
 
height:100%; 
 
border-radius:100%; 
 
} 
 

 
#avatar img:hover{ 
 
-webkit-transition: all 0.7s ease-in; 
 
-moz-transition: all 0.3s ease-in; 
 
-o-transition: all 0.3s ease-in; 
 
transition: all 0.3s ease-in; 
 
-ms-transform: scale(1.5, 1.5); /* IE 9 */ 
 
-webkit-transform: scale(1.5, 1.5); /* Safari */ 
 
transform: scale(1.5, 1.5); 
 
}

<div id="avatar"><img src="https://us.123rf.com/450wm/valentint/valentint1503/valentint150302008/37824182-examples-icon-internet-button-on-colored-background.jpg?ver=6"></div>

Answer 1

更新的片段包括

#avatar img { 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -ms-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
} 

爲了便於出過渡效果。

#avatar { 
 
    margin: auto; 
 
    margin-top: 15px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 60px; 
 
    border:0px solid { 
 
    color: Main icon background 
 
    } 
 
    ; 
 
    z-index:10; 
 
} 
 

 
#avatar img { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 100%; 
 
} 
 

 
#avatar img:hover { 
 
    -webkit-transition: all 0.7s ease-in; 
 
    -moz-transition: all 0.3s ease-in; 
 
    -o-transition: all 0.3s ease-in; 
 
    transition: all 0.3s ease-in; 
 
    -ms-transform: scale(1.5, 1.5); 
 
    /* IE 9 */ 
 
    -webkit-transform: scale(1.5, 1.5); 
 
    /* Safari */ 
 
    transform: scale(1.5, 1.5); 
 
} 
 

 
#avatar img { 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    -ms-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
}

<div id="avatar"><img src="https://us.123rf.com/450wm/valentint/valentint1503/valentint150302008/37824182-examples-icon-internet-button-on-colored-background.jpg?ver=6"></div>