如何对倾斜矩形的高度进行动画处理？

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>