글꼴 변형 된 CSS 변환

Question

a 태그와 i이있는 CSS 변환을 사용하려고합니다. 지금까지 태그와 i 태그에 class/id를 추가하여 대상을 지정하려고 시도했습니다. 또한 각 .fa 클래스를 대상으로합니다. 나는 텍스트 나 아이콘을 회전 시키려고한다. 둘 다 아닙니다. 당신은 .main-nav a.에 display: inline-block 또는 display: block을 놓치고 http://codepen.io/anon/pen/woRyMG

<div class="float-nav"> 
     <i class="fa fa-compass fa-4x menu-btn"></i> 
    </div> 
    <div class="main-nav"> 
    <!-- <a href="" class="fa fa-home">Home</a> --> 
    <a href="#"><i class="fa fa-home" id="one" aria-hidden="true"></i>Home</a> 
    <a href="#"><i class="fa fa-terminal" aria-hidden="true"></i>Projects</a> 
    <a href="#"><i class="fa fa-pencil" aria-hidden="true"></i>Blog</a> 
    <a href="#"><i class="fa fa-file-text-o" aria-hidden="true"></i>CV</a> 
    </div> 

    <div class="container-fluid"> 
     <header> 
     <div class="header-background"> 
      <div class="header-text"> 
      <p>Some Text Here </p> 
      </div> 
     </div> 

     </header> 

    </div> 



body, 
html, 
header, 
.container-fluid { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

body { 
    font-family: 'Open Sans', sans-serif; 
} 

.main-nav, 
.float-nav { 
    position: absolute; 
    bottom: 20px; 
    right: 20px; 
    z-index: 2; 
} 

.main-nav { 
    /*display: none; toggle this to see animation on click*/ 
} 

.main-nav a { 
    margin-right: 2px; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 22px; 
} 

.main-nav a:first-child { 
    color: orange; 
    -webkit-transform: rotate(-50deg); 
} 

.main-nav a:nth-child(2) { 
    color: green; 
} 

.main-nav a:nth-child(3) { 
    color: yellow; 
} 

.main-nav a:nth-child(4) { 
    color: blue; 
} 

.active-nav { 
    display: block; 
} 

.header-background { 
    background: url("http://placehold.it/900x900") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-height: 100%; 
    width: 100%; 
} 

Answer 1

링크 codepen합니다. 그것은해야한다 :

이

.main-nav a { 
    display: inline-block; /* Or block. Depends of what You need */ 
    margin-right: 2px; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 22px; 
} 

또한 .main-nav a:first-child에 접두사없이 transform를 추가합니다. 그러면 다음과 같이됩니다 :

.main-nav a:first-child { 
    color: orange; 
    -webkit-transform: rotate(-50deg); 
    transform: rotate(-50deg); 
} 

기억하지 않으면 접두사가 붙지 않습니다.