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

【问题标题】：Can I invert the height direction from top-down to bottom-up?我可以将高度方向从自上而下反转为自下而上吗？
【发布时间】：2021-08-11 03:12:24
【问题描述】：

我想将高度增长路径从自上而下更改为自下而上。在 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;
}

&lt;div class='button'&gt; &lt;/div&gt;

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

【问题讨论】：

我能想到的唯一方法是使用绝对定位，原始位置基于bottom 而不是top。正如你所做的那样使用浮动的相对定位......我不这么认为。

标签： html css height direction

【解决方案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
}

                       &lt;div class='buttom'&gt; &lt;/div&gt;

使用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
}

&lt;div class='buttom'&gt; &lt;/div&gt;

或者这样：

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

&lt;div class='buttom'&gt;&lt;/div&gt;

【讨论】：

【解决方案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)。在这种情况下，方块在成长过程中会在视觉上保持固定。

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

【讨论】：

这是在框外，仍然可以使用相对定位。好主意。

【解决方案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>

【讨论】：

【解决方案4】：

您必须将absolute 位置设置为<div>。

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

&lt;div class='buttom'&gt;&lt;/div&gt;

【讨论】：