CSS转换 - 反转原点/方向

Question

我想从上到下而不是从下到上制作我的标签动画。所以顶部将打开，底部停留在那里：

div.label4 {
  background-color: #4D6EF6;
  width: 278px;
  height: 388px;
  margin: 10px auto;
  text-align: center;
  vertical-align: middle;
  color: #4D6EF6;
  font-size: 30px;
  font-weight: bold;
  border-radius: 4px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-decoration: none;
  border: transparent;
  float: left;
  transition: width 1.5s, height 1.5s;
  transition-duration: 1.5s
}

div.label4:hover {
  height: 194px;
}

<div class="label4"></div>

Answer 1

你可以通过transform-origin实现你想要的动画，它更灵活，更好，并为你的元素的每一边设置div.label4 { background-color: #4D6EF6; width: 278px; height: 388px; margin: 10px auto; text-align: center; color: #4D6EF6; font-size: 30px; font-weight: bold; border-radius: 4px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-decoration: none; border: transparent; transition: transform 1.5s; transform: scaleY(1); transform-origin: bottom center; } div.label4:hover { transform: scaleY(0.5); }，

<div class="label4"></div>

{{1}}

Answer 2

只需将其包裹在flex-direction: column-reverse的父级中，即可完成：

.parent {
  display: flex;
  flex-direction: column-reverse;
  height: 388px;
  width: 278px;
}

＆＃13;

＆＃13;

div.label4 {
  background-color: #4D6EF6;
  width: 278px;
  height: 388px;
  margin: 10px auto;
  text-align: center;
  vertical-align: middle;
  color: #4D6EF6;
  font-size: 30px;
  font-weight: bold;
  border-radius: 4px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-decoration: none;
  border: transparent;
  float: left;
  transition: width 1.5s, height 1.5s;
  transition-duration: 1.5s
}

div.label4:hover {
  height: 194px;
}
.parent {
  display: flex;
  flex-direction: column-reverse;
  height: 388px;
  width: 278px;
}

＆＃13;

<div class="parent">
  <div class="label4"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您可以更改HTML，则可以创建容器，然后使用.label4和position: absolute

定位bottom

＆＃13;

＆＃13;

.parent {
  height: 388px;
  padding-top: 10px;
  position: relative;
}

div.label4 {
  background-color: #4D6EF6;
  width: 278px;
  height: 388px;
  margin: 10px auto;
  text-align: center;
  vertical-align: middle;
  color: #4D6EF6;
  font-size: 30px;
  font-weight: bold;
  border-radius: 4px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-decoration: none;
  border: transparent;
  float: left;
  transition: width 1.5s, height 1.5s;
  transition-duration: 1.5s;
  position: absolute;
  bottom: 0;
}

div.label4:hover {
  height: 194px;
}

＆＃13;

<div class="parent">
  <div class="label4"></div>
</div>

＆＃13;

＆＃13;

＆＃13;