帶有字體真棒的CSS轉換

Question

我正在嘗試使用帶有a標記和i的CSS轉換。到目前爲止，我試圖通過在a標籤和i標籤中添加class/id來達到目標​​。也針對每個.fa類。我要麼讓文字或圖標旋轉。不是都。

鏈接codepen 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

你在.main-nav a.失蹤display: inline-block或display: block。它應該是：

.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; 
} 

沒有前綴的同時添加transform到.main-nav a:first-child。所以它會是：

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

記住 - 前綴前無前綴。