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

解决方案 你只需要像这样设置 position: absolute 和 bottom 位置:.buttom{边距顶部:200px;边距右:34px;宽度:150px；高度:45px；背景:黑色；浮动:右；位置:绝对；底部:10px；过渡:高度 2 秒缓入缓出}.buttom:悬停{高度:180px} 使用旋转和transform-origin 能够设置相对于元素的位置.buttom{边距顶部:200px;/* 这应高于悬停时的高度 */边距右:34px;宽度:150px；高度:45px；背景:黑色；过渡:高度 2s 缓入缓出；变换:rotatex(180度)；变换原点:顶部；}.buttom:悬停{高度:180px}或者这样:.buttom{宽度:150px；高度:45px；背景:黑色；过渡:高度 .3s 三次贝塞尔曲线(0.175, 0.885, 0.32, 1.275)；变换:rotatex(180deg) translate3d(0, -200px,0);/* Y 值应高于悬停时的高度*/变换原点:顶部；}.buttom:悬停{高度:180px}<div class='buttom'></div>I want to change the height growth path from top-down to bottom-up. Is it possible in 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/ 解决方案 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>Use Rotate and transform-origin to be able to set position relative to the element.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>Or this way:.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> 这篇关于我可以将高度方向从自上而下反转为自下而上吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！