トランスフォーム：翻訳が機能しない

Question

ボタンアニメーションを作成しようとしていますが、transform:translateYは私にとっては効果がありません。

ul { 
 
\t list-style-type: none; 
 
\t padding:0; 
 
\t 
 
} 
 
.btn { 
 
\t height: 42px; 
 
\t width: 20px; 
 
\t display: inline-block; 
 
\t border: none; 
 
\t background-color: #E6E6FF; 
 
\t box-shadow: 0 8px #ccccff; 
 
} 
 
.btn:focus { 
 
\t outline:0; 
 
\t 
 
} 
 
.btn:hover { 
 
\t box-shadow: 0 4px #ccccff; 
 
\t transform: translateY(4px); 
 
} 
 
.btn:active { 
 
\t box-shadow:none; 
 
\t transform: translateY(4px); 
 
}

<ul> 
 
\t <li> 
 
\t \t <button class="btn"></button> 
 
\t </li> 
 
</ul>

私は一度押す他の付いたボタンをフラッシュしようとしてメートル。ボックスの影は消えますが、ボタンは別の4ピクセル下に移動しませんtransform: translateY(4px);なぜこれが起こっているのか分かりませんが、あなたの考えはすばらしいでしょう。

Answer 1

.btn:active { 
box-shadow:none; 
transform: translateY(8px); 

}