Recently, I had an idea to create a unique menu using parallelogram containers and animate them with CSS. My concept involved changing the height of the parallelogram when hovering over an item to achieve a visually appealing scaling effect.
However, while implementing this idea, I encountered an issue where adjusting the height of the parallelogram on hover also caused it to shift slightly to the right, which was not intentional and puzzled me.
My question is: Is there a way to modify the height of the parallelogram without affecting its position?
Here is the unexpected outcome I observed:
.container {
float: left;
padding: 0 0.5rem;
}
.parallelogram {
position: relative;
width: 125px;
height: 50px;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);
transition: all .4s linear;
}
.parallelogram:hover {
height: 100px;
}<div class="container">
<div class="parallelogram" style="background-color: red;">
1
</div>
</div>
<div class="container">
<div class="parallelogram" style="background-color: green;">
2
</div>
</div>
<div class="container">
<div class="parallelogram" style="background-color: blue;">
3
</div>
</div>