画像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; 
} 

そして、このdivの内側に、私はこの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); 
} 

のtransformプロパティを使用します

Answer 2

ただ、そのがsourrounding要素の位置を無視して、移行を行うためにtransform: translate(x,y)を使用しています。

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