web-dev-qa-db-ja.com

CSSで高さ方向を反転します

トップダウンからダウントップの高さの増加経路を変更したいCSSで可能ですか？これは私のコードです
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;}
htmlcssheightdirection
11
Yashar Shahmiri

必要なのは、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>
16
Gildas.Tambo

あなたは賢いトリックをすることができます：高さが下から上に成長しているように見えるように高さと同時にmargin-topを変更します：

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

最終的なmargin-top（65px）は、開始margin-top（200）と、結果の（180px）および初期（45px）の高さの差分の差です：65 = 200 180-45）。この場合、ブロックは成長している間、視覚的に固定されたままになります。

デモ：---（http://jsfiddle.net/1pkemq1p/6/

6
dfsq

@PlantTheIdea（素敵な名前）が答えを持っていました。注意点（絶対配置）は、レイアウトによってはかなり大きなものですが、その仕組みは次のとおりです。

.bottom-wrap { position: relative; height: 180px;}
.bottom { position: absolute; bottom:0; width: 100px; height: 20px; 
  background: #000;
  transition: height 0.2s ease-in-out;
}
.bottom:hover { height: 180px; }
<div class="bottom-wrap">
  <div class="bottom">
    </div>
</div>
3
Adam

absoluteの位置を<div>に設定する必要があります。

.buttom {
  width: 150px;
  height: 45px;
  background: black;
  transition-duration: 2s;
  position: absolute;
  right: 10%;
  bottom: 10%;
}
.buttom:hover {
  height: 180px;
  transition-duration: 2s;
}
<div class='buttom'></div>
2
emmanuel