如何设置歪斜矩形的高度动画？

Question

我试图在悬停矩形时制作动画。我想要达到的目的是让Rectangle像倾斜一样在倾斜时占据整个高度，我不想拉直。这就是我到目前为止所做的。我也使用变换矩阵，但我没有很好的结果

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  background-color: black;
  border: 1px solid black;
  width: 100px;
  height: 8px;
  background-color: rgba(252, 207, 39, .2);
  -webkit-transform: skew(-25deg);
  -moz-transform: skew(-25deg);
  -ms-transform: skew(-25deg);
  -o-transform: skew(-25deg);
  transform: skew(-25deg);
  transition: transform 1s;
}

.square:hover {
  transform: scaleY(50);
}

<div class="square"></div>

Answer 1

您可以组合高度和变换动画，如下所示：

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  background-color: black;
  border: 1px solid black;
  box-sizing:border-box;
  width: 100px;
  height: 8px;
  background-color: rgba(252, 207, 39, .2);
  transform: translate(-50%,-50%) skew(-25deg);
  transition: all 1s;
}

.square:hover {
  transform:translate(-50%,-50%) skew(0deg);
  height:100%;
}

body {
 margin:0;
}

<div class="square">
</div>

如果你想保持歪斜效果，只需调整高度：

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  background-color: black;
  border: 1px solid black;
  box-sizing:border-box;
  width: 100px;
  height: 8px;
  background-color: rgba(252, 207, 39, .2);
  transform: translate(-50%,-50%) skew(-25deg);
  transition: all 1s;
}

.square:hover {
  height:100%;
}

body {
 margin:0;
}

<div class="square">
</div>

使用比例你可以尝试这个（注意变换的顺序）

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  background-color: black;
  border: 1px solid black;
  box-sizing:border-box;
  width: 100px;
  height: 100%;
  background-color: rgba(252, 207, 39, .2);
  transform: translate(-50%,-50%) skew(-25deg) scaleY(0.1);
  transition: all 1s;
}

.square:hover {
  transform: translate(-50%,-50%) skew(-25deg)  scaleY(1);
}

body {
 overflow:hidden;
 margin:0;
}

<div class="square">
</div>

轮换的另一个想法：

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  background-color: black;
  border: 1px solid black;
  box-sizing:border-box;
  width: 100px;
  height: 100%;
  background-color: rgba(252, 207, 39, .2);
  transform: translate(-50%,-50%) skew(-25deg) rotateX(85deg); /*close to 90deg*/
  transition: all 1s;
}

.square:hover {
  transform: translate(-50%,-50%) skew(-25deg) rotateX(0deg);
}

body {
 overflow:hidden;
 margin:0;
}

<div class="square">
</div>

Answer 2

只需在徘徊的过渡中再次包含歪斜。问题是您从偏斜（-25deg）转换为默认值skew，即0。

确保在徘徊规定的scaleY之前包括歪斜;订单很重要！如果在scaleY之后放置倾斜，它将垂直拉伸，改变倾斜的表观值。

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  background-color: black;
  border: 1px solid black;
  width: 100px;
  height: 8px;
  background-color: rgba(252, 207, 39, .2);
  -webkit-transform: skew(-25deg);
  -moz-transform: skew(-25deg);
  -ms-transform: skew(-25deg);
  -o-transform: skew(-25deg);
  transform: skew(-25deg);
  transition: transform 1s;
}

.square:hover {
  transform: skew(-25deg) scaleY(50);
}

<div class="square">
</div>