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-origin的{{1}}。

这是更新的演示。

＆＃13;

.parallelogram

＆＃13;

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

＆＃13;

为偏斜的div设置动画而不会产生不良影响

1 个答案: