이미지 CSS div의 전환에 "흔들어"

Question

나는 호버에서이 CSS와 DIV 있습니다

.card .avatar { 
    border-radius: 100px; 
    margin-top: -30px; 
    margin-left: 10px; 
} 

문제 :

.card:hover { 
    box-shadow: 5px 5px 20px #c4c4c4; 
    margin-top: -5px; 
    margin-left: -5px; 
} 

그리고이 사업부 내에서, 나는이 CSS와 이미지가

전환이 발생할 때 이미지가 약간 떨리는 것처럼 보입니다.

Here's 바이올린 : https://jsfiddle.net/zudvv4cv/2/

Answer 1

모든 적절한 접두사

.card:hover { 
    box-shadow: 5px 5px 20px #c4c4c4; 
    -webkit-transform:translate(-5px, -5px); 
      transform:translate(-5px, -5px); 
} 

샘플 https://jsfiddle.net/zudvv4cv/4/

을 사용했는지 확인하는 대신 마진

.card:hover { 
    box-shadow: 5px 5px 20px #c4c4c4; 
    transform:translate(-5px, -5px); 
} 

의 변환 속성을 사용하여

Answer 2

그냥 전환, 그것을 sourrounding 요소의 위치를 ​​무시 할 transform: translate(x,y)를 사용합니다.

transform: translate(-5px, -5px);