为偏斜的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

根据我的理解,你只需要更改transform-originfor .parallelogram.

这是更新的演示.

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