Html 在CSS中反转高度方向

我想将“自上而下”的高度增长路径更改为“自下而上” 在CSS中可能吗？ 这是我的代码

---

您必须将

绝对

位置设置为

.butom{
宽度：150px；
高度：45px；
背景：黑色；
过渡时间：2s；
位置：绝对位置；
右：10%；
底部：10%；
}
.按钮：悬停{
高度：180像素；
过渡时间：2s；
}

@plantheidea（好名字）得到了答案。它的警告（绝对定位）是一个相当大的警告，取决于您的布局，但它是如何工作的：

.bottomwrap{位置：相对；高度：180px；}
.bottom{位置：绝对；底部：0；宽度：100px；高度：20px；
背景：#000；
过渡段：高度0.2s缓进缓出；
}
.bottom:悬停{高度：180px；}

---

您只需设置

位置：绝对位置和
底部位置，如下所示：
.butom{
利润上限：200px；
右边距：34px；
宽度：150px；
高度：45px；
背景：黑色；
浮动：对；
位置：绝对位置；
底部：10px；
过渡：高度2秒，易于进出
}
.按钮：悬停{
高度：180像素
}
你可以做一个聪明的小把戏：将
页边顶部
与高度同时更改，使其看起来像是从底部向顶部增长：

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

最终的
页边距顶部
（65px）是起始
页边距顶部
（200）的差值，以及结果（180px）和初始（45px）高度的差值：65=200-（180-45）。在这种情况下，积木在成长过程中会在视觉上保持固定

演示：我能想到的唯一方法是使用绝对定位，原始位置基于
底部
，而不是
顶部
。如您所做的那样，使用浮动的相对定位。。。我不这么认为。这是在盒子外面，仍然可以使用相对定位。好主意。哦，我喜欢你的rotateX主意！
.buttom:hover {
    height: 180px;
    margin-top: 65px;
    transition-duration: 2s;
}