Transform: Übersetzen funktioniert nicht

Ich versuche, eine Schaltfläche Animation zu machen, aber transform:translateY scheint nicht für mich arbeiten.Transform: Übersetzen funktioniert nicht

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>

Ich versuche, den Knopf bündig mit dem anderen einmal gedrückt zu machen. Die Feldschatten verschwinden, aber der Knopf wird nicht um weitere 4 Pixel nach unten verschoben. transform: translateY(4px); Nicht sicher, warum dies geschieht, Ihre Gedanken wären großartig.

Quelle

2016-03-24 nnokalad

** Bei ** erwarten Sie die Taste weitere 4 Pixel nach unten verschoben werden? Ich vermute, dass ': active' nicht das tut, was Sie denken, dass es tut. –

Wenn ich es anklicke. Es entfernt bereits die Schatten (die ich will), aber es bewegt sich nicht die 4px hinunter, um es wie eine natürliche Presse aussehen zu lassen. – nnokalad

Ich glaube, es ist, weil Sie sagen, es 4px von seiner ursprünglichen Position herunter zu bewegen. Wenn Sie 8px auf dem aktiven Feld versuchen, erreicht das, was Sie wollen? – lovermanthing

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

}

Quelle

2016-03-24 22:42:50

Warum? Was macht das? Erkläre die Antwort - Code nur Antworten sind nicht sehr hilfreich. –

Ja, das ist es. Ich wusste nur nicht, dass es es von der ursprünglichen Position übersetzt. Vielen Dank! – nnokalad

Transform: Übersetzen funktioniert nicht

Antwort

Verwandte Themen