How to make a skewed shape stay skewed when clicked?

Question

Hello, I'm trying to make a skewed shape stay skewed when clicked, but the following code does not do that. It looks like a diamond before click and looks like square after click, but I want it to stay as a diamond shape. How can I fix this? Thank you!

CSS

.keys{
border: 1px solid black;
width: 15px;
height: 15px;
background-color: white;
transform: skew(-10deg);
}

.keys:active {
transform:translateY(5px);
}

HTML

<div class="keys"></div>

Answer 1

add to transform in active
transform:skew(-10deg) translateY(5px);

Answer 2

✌️

Answer 3

This worked, thank you! I thought the skew would be inherited