.element { box-shadow: 5px 4px 0px 0 rgba(0,0,0,0.2); transform: translate3d(0, 0, 0) perspective(0); transition: all 1s ease-out; backface-visibility: hidden; } .element:hover { will-change: transform, transition, box-shadow; box-shadow: 3px 2px 0px 0 rgba(0,0,0,0.2); transform: translate3d(2px, 2px, 0) perspective(0); } 想定する動き マウスオンしたら 右に2px 下に2px 影とボタンの距離が近くなる（様に見せてる） というようなエフェクトを想定しています。 ホバー処理
