CSS 전환 방향 바꾸기

Question

버튼을 오른쪽 여백에 맞지 않고 이동하지 않도록 왼쪽으로 이동 시키려고합니다. 그러나 어떻게 움직이는 지 모르겠습니다.

누군가 전환의 방향을 변경하는 방법을 설명 할 수 있습니까?

.menus { 
 
    position: fixed; 
 
    right: 40; 
 
    top: 150px; 
 
    z-index: 2000; 
 
} 
 

 
.menus ul { 
 
    list-style: none; 
 
} 
 

 
.menus ul li a { 
 
    display: inline-block; 
 
    color: #fff; 
 
    background: #000; 
 
    padding: 10px 15px; 
 
    text-decoration: none; 
 
    -webkit-transition: all .3s ease; 
 
    -moz-transition: all .3s ease; 
 
    -ms-transition: all .3s ease; 
 
    -o-transition: all .3s ease; 
 
    transition: all .3s ease; 
 
} 
 

 
.menus ul li .icon-home3 { background: #81e0cd; } 
 
.menus ul li .icon-terminal { background: #81e0cd; } 
 
.menus ul li .icon-pacman { background: #81e0cd; } 
 

 
.menus ul li a:hover { 
 
    padding: 10px 25px; 
 
    background: #000; 
 
}

<div class='menus'> 
 
    <ul> 
 
    <li> 
 
     <a href="#" class="icon-home3"></a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="icon-terminal"></a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="icon-pacman"></a> 
 
    </li> 
 
    </ul> 
 
</div>

그 일의

Answer 1

해키 방법 그러나 당신 수 있습니다.

padding: 10px 25px을 transform: scaleX(1.6)으로 변경하면 원하는 값을 입력 할 수 있습니다.

.menus { 
 
    position: fixed; 
 
    right: 40; 
 
    top: 150px; 
 
    z-index: 2000; 
 
} 
 

 
.menus ul { 
 
    list-style: none; 
 
} 
 

 
.menus ul li a { 
 
    display: inline-block; 
 
    color: #fff; 
 
    background: #000; 
 
    padding: 10px 15px; 
 
    text-decoration: none; 
 
    -webkit-transition: all .3s ease; 
 
    -moz-transition: all .3s ease; 
 
    -ms-transition: all .3s ease; 
 
    -o-transition: all .3s ease; 
 
    transition: all .3s ease; 
 
} 
 

 
.menus ul li .icon-home3 { background: #81e0cd; } 
 
.menus ul li .icon-terminal { background: #81e0cd; } 
 
.menus ul li .icon-pacman { background: #81e0cd; } 
 

 
.menus ul li a:hover { 
 
    transform: scaleX(1.6); 
 
    background: #000; 
 
}

<div class='menus'> 
 
    <ul> 
 
    <li> 
 
     <a href="#" class="icon-home3"></a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="icon-terminal"></a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="icon-pacman"></a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

당신은 오른쪽으로 항목을 이동 text-align 속성을 사용할 수 있습니다. 어쨌든 너비를 수정하고 싶으므로 padding 속성을 width으로 변경했습니다.

변경 사항은 onHover 이벤트 항목에 적용됩니다. 따라서 요소의 표준 크기로 시작합니다. 20px 다음으로 100% 또는 whatever size으로 자랄 수 있습니다.

다른 사람들이 이미 의견 섹션에 쓴 것처럼 flexbox을 자유롭게 사용할 수 있습니다.

.menus { 
 
     position: fixed; 
 
     right: 40; 
 
     top: 150px; 
 
     z-index: 2000; 
 
     background-color: pink; 
 
    } 
 
    
 
    .menus ul { 
 
     display: block; 
 
     width: 100px; 
 
     text-align: right; 
 
     padding: 10px 0 5px; 
 
     margin: 0; 
 
     list-style: none; 
 
    } 
 
    
 
    .menus ul li a { 
 
     display: inline-block; 
 
     color: #fff; 
 
     background: #000; 
 
     height: 20px; 
 
     width: 20px; 
 
     margin: 0; 
 
     padding: 0; 
 
     text-decoration: none; 
 
     -webkit-transition: all .3s ease; 
 
     -moz-transition: all .3s ease; 
 
     -ms-transition: all .3s ease; 
 
     -o-transition: all .3s ease; 
 
     transition: all .3s ease; 
 
    } 
 
    
 
    .menus ul li .icon-home3 { 
 
     background: #81e0cd; 
 
    } 
 
    
 
    .menus ul li .icon-terminal { 
 
     background: #81e0cd; 
 
    } 
 
    
 
    .menus ul li .icon-pacman { 
 
     background: #81e0cd; 
 
    } 
 
    
 
    .menus ul li:hover a { 
 
     width: 100%; 
 
     background: #000; 
 
    }

<div class='menus'> 
 
    <ul> 
 
    <li> 
 
     <a href="#" class="icon-home3"></a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="icon-terminal"></a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="icon-pacman"></a> 
 
    </li> 
 
    </ul> 
 
</div>