在CSS中反转高度方向 [英] Invert height direction in CSS

问题描述

我想改变自顶向下的高度增长路径到
是否可以在CSS中使用？
这是我的代码

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

  .buttom {
 margin-top：200px; 
 margin-right：34px; 
 width：150px; 
 height：45px; 
背景：黑色; 
 float：right; 
 transition-duration：2s; } 
 .buttom：hover {
 height：180px; 
 transition-duration：2s;} 
  

解决方案

所有你需要的是像这样设置 position：absolute 和 bottom 位置：

  .buttom {margin-top：200px;保证金右：34像素;宽度：150像素;高度：45像素;背景：黑色;浮动：权利;位置：绝对的;底部：10px; transition：height 2s ease-in-out} .buttom：hover {height：180px}  

 < div class ='buttom'> < / div>  

使用旋转和变换原点可以设置相对于元素的位置

.buttom {margin-top：200px; / *这应该高于悬停时的高度* / margin-right：34px;宽度：150像素;高度：45像素;背景：黑色;过渡：身高2s缓出; transform：rotatex（180deg）; transform-origin：top;}。buttom：hover {height：180px}

 < div class ='buttom'> < / div>  

或者这样：

.buttom {width：150px;高度：45像素;背景：黑色;转变：高度.3s立方贝塞尔（0.175,0.885,0.32,1.275）; transform：rotatex（180deg）translate3d（0，-200px，0）; / * Y值应高于悬停时的高度* / transform-origin：top;}。buttom：hover {height：180px} code>

< div class ='buttom'>< / div> ;

I want to change the height growth path of Top-down to Down-top Is it possible in CSS? this is my code
http://jsfiddle.net/yasharshahmiri/1pkemq1p/3/

        .buttom{
margin-top:200px;
margin-right:34px;
width:150px;
height:45px;
background:black;
float:right;
transition-duration:2s;  }
    .buttom:hover{
        height:180px;
        transition-duration:2s;}

解决方案

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>

这篇关于在CSS中反转高度方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！