html - 在没有不良影响的情况下为倾斜的 div 设置动画

Question

我想制作一个带有平行四边形容器的菜单，并在 CSS 上为它们制作动画。这个想法是当您悬停一个元素时，平行四边形会改变它的高度以产生视觉缩放效果。

到目前为止一切顺利，但问题是当我在悬停时改变平行四边形的高度时，它的位置也会稍微向右改变，我不知道为什么。

所以提示是:是否有任何方法可以改变平行四边形的高度以保持其位置？

这是我得到的不良效果:

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

据我了解，您只需更改 .parallelogram 的 transform-origin。

这是更新后的演示。

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