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

Question

我正在尝试制作悬停在矩形上的动画。我想要实现的是使矩形像显示的那样在倾斜时占据整个高度，我不想被拉直。这是我到目前为止所做的。我也用了变换矩阵但是我没有很好的结果

.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

再次在悬停过渡中简单地包含倾斜。问题是您从 skew(-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>

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

How to Animate the height of a skewed rectangle?

html

css

css-transforms