css - CSS translation3d

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

在我的孩子身上：

  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;

但是，我还无法开始工作。

一如既往地感谢您的帮助。

干杯

更新

在这里测试以查看其是否正常工作

.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;
}

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

最佳答案

有两种方法，位置为bottom和flex。

.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;
}

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