css3で画像にプレスエフェクト

Question

私のハイブリッドモバイルアプリでは、複数のアイコンがあり、アイコンをクリックするとプレス効果を再現したいと思います。

HTML：

<div class="menuIcon" id="menuIcon"> 
     <img src="img/menu.svg" /> 
</div> 

CSS：

.menuIcon { 
    width: 32px; 
    height: 32px; 
    position: absolute; 
    left: 20px; 
    top: 28px; 
} 

.menuIcon img { 
    width: 19px; 
    height: 19px; 
    position: absolute; 
    margin: auto; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

私が再現したいのプレス効果がTwitterアプリに表示されている：あなたはここでそれを見ることができます：https://vid.me/gub5

Answer 1

あなたはこのように、transform: scaleと:active

.menuIcon { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: absolute; 
 
    left: 20px; 
 
    top: 28px; 
 
} 
 
.menuIcon img { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
.menuIcon img:active { 
 
    transform: scale(0.8); 
 
}

<div class="menuIcon" id="menuIcon"> 
 
     <img src="http://placehold.it/100" /> 
 
</div>