sean sean - 5 months ago 19
CSS Question

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

UPDATE

Testing here to see if its working properly



.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

Here are 2 ways, with position bottom and with 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>