带有字体真棒的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); 
} 

记住 - 前缀前无前缀。