CSS translate3d

Question

Ive искал интернет в течение нескольких часов, и я не могу найти решение для того, что я хотел бы сделать.

на ребенка у меня есть:

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>