CSS 翻译3d

Question

我已经在 Internet 上搜索了几个小时，但我找不到解决方案。

在 child 我有：

  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>

Answer 1

这里有两种方式，位置 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>

CSS 翻译3d

CSS translate3d

css

transform

css-transforms