CSS3 круг преобразования

Question

У меня есть эта скрипку: https://jsfiddle.net/repoo0fz/ У меня есть этот CSS код:

.menubutton{ 
    height:90px; 
    width:180px; 
    border-radius: 180px 180px 0 0; 
    -moz-border-radius: 180px 180px 0 0; 
    -webkit-border-radius: 180px 180px 0 0; 
    float:left; 
padding:0px; 
margin-left:5px; 
margin-bottom:0px; 
font-family:courier new; 
font-size:20px; 
    -webkit-transition: height 0.5s; /* Safari */ 
    -webkit-transition-delay: 0s; /* Safari */ 
    transition: height 0.5s; 
    transition-delay: 0s; 
    line-height: 90px; 
    text-align:center; 
    border: 1px solid white; 
} 
.menubutton:hover{ 
    height:180px; 
    border-radius: 180px 180px; 
    -moz-border-radius: 180px 180px; 
    -webkit-border-radius: 180px 180px; 
} 

Но преобразование не как я хочу. Это выглядит странно, когда он идет от полукруга до полного круга. Он не расширяется из полукруга, а больше из овального. Мне просто нужна последняя половина круга. Что я могу сделать?

Answer 1

Вы можете сделать это так, изменение перехода от высоты на все transition: all 0.5s;:

.menubutton { 
 
    height: 90px; 
 
    width: 180px; 
 
    border-radius: 180px 180px 0 0; 
 
    -moz-border-radius: 180px 180px 0 0; 
 
    -webkit-border-radius: 180px 180px 0 0; 
 
    float: left; 
 
    padding: 0px; 
 
    margin-left: 5px; 
 
    margin-bottom: 0px; 
 
    font-family: courier new; 
 
    font-size: 20px; 
 
    -webkit-transition: all 0.5s; 
 
    /* Safari */ 
 
    -webkit-transition-delay: 0s; 
 
    /* Safari */ 
 
    transition: all 0.5s; 
 
    transition-delay: 0s; 
 
    line-height: 90px; 
 
    text-align: center; 
 
    border: 1px solid white; 
 
} 
 
.menubutton:hover { 
 
    height: 180px; 
 
    border-radius: 180px 180px; 
 
    -moz-border-radius: 180px 180px; 
 
    -webkit-border-radius: 180px 180px; 
 
}

<div class="menubutton" style="background:#46B29D;">Menu1</div> 
 
<div class="menubutton" style="background:#F0CA4D;">Menu2</div> 
 
<div class="menubutton" style="background:#E37B40;">Menu3</div>

Answer 2

Вы только переход высоту ... Вы должны установить, что all или, по крайней мере, для всех свойств, которые меняются

.menubutton { 
 
    height: 90px; 
 
    width: 180px; 
 
    border-radius: 180px 180px 0 0; 
 
    -moz-border-radius: 180px 180px 0 0; 
 
    -webkit-border-radius: 180px 180px 0 0; 
 
    float: left; 
 
    padding: 0px; 
 
    margin-left: 5px; 
 
    margin-bottom: 0px; 
 
    font-family: courier new; 
 
    font-size: 20px; 
 
    -webkit-transition: all 0.5s; 
 
    /* Safari */ 
 
    -webkit-transition-delay: 0s; 
 
    /* Safari */ 
 
    transition: all 0.5s; 
 
    transition-delay: 0s; 
 
    line-height: 90px; 
 
    text-align: center; 
 
    border: 1px solid white; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.menubutton:hover { 
 
    height: 180px; 
 
    border-radius: 180px 180px; 
 
    -moz-border-radius: 180px 180px; 
 
    -webkit-border-radius: 180px 180px; 
 
}

<div class="menubutton" style="background:#46B29D;">Menu1</div> 
 
<div class="menubutton" style="background:#F0CA4D;">Menu2</div> 
 
<div class="menubutton" style="background:#E37B40;">Menu3</div>