CSS translate3d

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; 

不過這個我一直沒能去上班。

一如既往，任何幫助表示讚賞。

乾杯

UPDATE

測試此處查看其是否正常工作

.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

這裏有2種方式，以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>