我想将高度增长路径从自上而下改为自下而上。在 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>
最佳答案
您只需像这样设置 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
}
<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>
关于html - 我可以将高度方向从自上而下反转为自下而上吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27451132/