在CSS中反转高度方向

Question

我想将自上而下的高度增长路径更改为Down-top它是否可以在CSS中使用？这是我的代码
http://jsfiddle.net/yasharshahmiri/1pkemq1p/3/

        .buttom{
margin-top:200px;
margin-right:34px;
width:150px;
height:45px;
background:black;
float:right;
transition-duration:2s;  }
    .buttom:hover{
        height:180px;
        transition-duration:2s;}

Answer 1

你需要的只是这样设置position: absolute和bottom定位:

.buttom{
    margin-top:200px;
    margin-right:34px;
    width:150px;
    height:45px;
    background:black;
    float:right;
    position:absolute;
    bottom: 10px;
    transition: height 2s ease-in-out  
}
.buttom:hover{
    height:180px
}

                       <div class='buttom'> </div>

使用Rotate和transform-origin可以设置相对于元素的位置

.buttom{
    margin-top:200px; /* this shall be higher than the height on hover*/
    margin-right:34px;
    width:150px;
    height:45px;
    background:black;
    transition: height 2s ease-in-out ;
    transform: rotatex(180deg);
    transform-origin: top;
}
.buttom:hover{
    height:180px
}
                       

<div class='buttom'> </div>

或者这样:

.buttom{
    width:150px;
    height:45px;
    background:black;
    transition: height .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) ;
    transform: rotatex(180deg) translate3d(0, -200px,0);/* the Y-Value shall be higher than the height on hover*/
    transform-origin: top;
}
.buttom:hover{
    height:180px
}
    

<div class='buttom'></div>

Answer 2

你可以做一个聪明的伎俩:margin-top同时改变高度,使它看起来高度从下到上增长:

.buttom:hover {
    height: 180px;
    margin-top: 65px;
    transition-duration: 2s;
}

最终margin-top(65px)是margin-top所得(180px)和初始(45px)高度的起始(200)和差异的差异:65 = 200-(180-45).在这种情况下,块在视觉上会在成长过程中保持固定.

演示:http://jsfiddle.net/1pkemq1p/6/