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

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/

- Yashar Shahmiri

---

我能想到的做法是使用绝对定位，其中原始位置基于 bottom 而不是 top。使用浮动的相对定位，就像你所做的那样...我觉得行不通。 - PlantTheIdea

Answer 1

All you need is to set position: absolute and bottom position like this:

.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>

- Gildas.Tambo

Answer 2

您可以使用一个巧妙的技巧：同时改变margin-top和高度，这样看起来高度就像从底部向上增长：

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

最终的 margin-top （65px）是初始 margin-top （200）和结果（180px）与初始（45px）高度差的差异：65 = 200-（180-45）。在这种情况下，块将在视觉上固定不动，同时增长。

Demo: http://jsfiddle.net/1pkemq1p/6/

- dfsq

---

这是超越常规的想法，仍然可以使用相对定位。非常棒的主意。 - PlantTheIdea

Answer 3

@PlantTheIdea（好名字）给出了答案。它的警告（绝对定位）是一个相当大的问题，取决于您的布局，但是下面是它的工作原理：

.bottom-wrap { position: relative; height: 180px;}
.bottom { position: absolute; bottom:0; width: 100px; height: 20px; 
  background: #000;
  transition: height 0.2s ease-in-out;
}
.bottom:hover { height: 180px; }

<div class="bottom-wrap">
  <div class="bottom">
    </div>
</div>

- Adam

Answer 4

您需要将<div>元素设置为absolute定位。

.buttom {
  width: 150px;
  height: 45px;
  background: black;
  transition-duration: 2s;
  position: absolute;
  right: 10%;
  bottom: 10%;
}
.buttom:hover {
  height: 180px;
  transition-duration: 2s;
}

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

- emmanuel