Ermac Ermac - 5 months ago 28
HTML Question

Animate an skewed div without undesired effects

I was thinking to make a menu with parallelogram containers and animate them on CSS. The idea is when you hover an item, the parrallelogram change it's height to make a visual scaling effect.

So far, so good, but the problem is that when I change the parallelogram's height on hover, it also change it's position a little bit to the right and I don't know why.

So the cuestion would be: Is it any way to change the parallelogram's height preserving it's position?

Here's the undesired effect I've got:



.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>




Answer

From what I understand, you just need to change the transform-origin for .parallelogram.

Here's the updated demo.

.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;
  transform-origin: top right;
}
.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>

Comments