CSS translate3d

Ive been searching th internet for a few hours now and I cant fins a solution for what I would like to do.

on the child I have:

  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);

And on hover I have:

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

What this is doing is starting the Y axis from the top and pushing it down 93px.

I need that to be reversed and make it so it reveals 93px on the bottom. So I need it to start at the bottom and pull up vs starting at the top and pushing down.

I didnt go into detail with html because I didnt think it would matter for this. if its needed let me know.

I have found things saying use:

transform-origin: center bottom;

However this I have not been able to get to work.

Any help is appreciated, as always.

Cheers