CSS转换 - 反转原点/方向

时间:2017-04-05 14:06:17

标签: css

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

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>

3 个答案:

答案 0 :(得分: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}}

答案 1 :(得分:1)

只需将其包裹在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;

答案 2 :(得分:1)

如果您可以更改HTML,则可以创建容器,然后使用.label4position: 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;