html - 我可以将高度方向从自上而下反转为自下而上吗？

Question

我想将高度增长路径从自上而下改为自下而上。在 CSS 中可能吗？

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

<div class='button'> </div>

http://jsfiddle.net/yasharshahmiri/1pkemq1p/3/

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>