Question

我已经在互联网上搜索了几个小时，我不能为我想做的事情找到解决方案。

关于我的孩子：

  top: auto;
  bottom: 0;
  padding: 1em;
  height: 100%;
  background: red;
  color: #3c4a50;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0,93px,0);
  transform: translate3d(0,93px,0);

在悬停时我有：

  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);

这样做是从顶部开始Y轴并将其向下推93px。

我需要将其反转并使其显示在底部显示93px。所以我需要它从底部开始向上拉，然后从顶部开始向下拉。

我没有详细介绍html，因为我认为这对此无关紧要。如果它需要让我知道。

我找到了使用的东西：

transform-origin: center bottom;

然而，我无法上班。

任何帮助都会一如既往地受到赞赏。

干杯

更新

在此测试以确定其是否正常工作

＆＃13;

.parent {
  position: relative;
  height: 150px;
  background-color: gray;
  width: 50%;
  float:left;
  overflow:hidden;
}

.child {
  position: absolute;
  bottom: -100%;
  padding: 1em;
  height: 100%;
  width:100%;
  background: red;
  color: #3c4a50;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0,-93px,0);
  transform: translate3d(0,-93px,0);
}


.child:hover{
  -webkit-transform: translate3d(0,0px,0);
  transform: translate3d(0,0px,0);
  bottom:0px;
}

＆＃13;

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

＆＃13;

Answer 1

以下是2种方式，位置bottom和flex。

＆＃13;

.parent {
  position: relative;
  height: 150px;
  background-color: gray;
  width: 50%;
  float:left;
  overflow:hidden;
}

.child {
  position: absolute;
  height: 100%;
  background-color: blue;
  bottom: -100%;
  width: 100%;
  transform: translate3d(0, -93px, 0);
  transition:.3s;
}


.child:hover{
  transform: translate3d(0, 0px, 0);
  bottom:0;
}

＆＃13;

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

＆＃13;

CSS translate3d

1 个答案: