我可以将高度方向从自上而下反转为自下而上吗? [英] Can I invert the height direction from top-down to bottom-up?
本文介绍了我可以将高度方向从自上而下反转为自下而上吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想将高度增长路径从自上而下更改为自下而上.在 CSS 中可以吗?
.button {边距顶部:200px;边距右:34px;宽度:150px;高度:45px;背景:黑色;浮动:右;过渡持续时间:2s;}.buttom:悬停{高度:180px;过渡持续时间:2s;}
http://jsfiddle.net/yasharshahmiri/1pkemq1p/3/>
解决方案
你只需要像这样设置 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>
这篇关于我可以将高度方向从自上而下反转为自下而上吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文