Font Awesome不支持CSS旋轉

Question

我想旋轉鼠標懸停在上面的圖標。它似乎並沒有爲我工作。過渡效果工作正常。我想知道我是否使用了錯誤的標籤來應用旋轉。下面是代碼：

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; 
 
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'; 
 
.list-icon-wrapper { 
 
    text-align: center; 
 
} 
 
.aticon i { 
 
    border-radius: 50%; 
 
    background: #5e8cfa; 
 
    width: 160px; 
 
    height: 160px; 
 
    text-align: center; 
 
    line-height: 100px; 
 
    vertical-align: middle; 
 
    padding: 30px; 
 
    color: #fff; 
 
    font-size: 60px; 
 
} 
 
.icon-wrapper:hover i { 
 
    background: #fff; 
 
    color: #5e8cfa; 
 
    border: 1px solid #5e8cfa; 
 
    transition: all 0.6s ease 0s; 
 
    -webkit-transition: all 0.6s ease 0s; 
 
    -moz-transition: all 0.6s ease 0s; 
 
    -ms-transition: all 0.6s ease 0s; 
 
    -o-transition: all 0.6s ease 0s; 
 
    display: inline-block; 
 
} 
 
.aticon:hover .fa { 
 
    transform: rotate(360deg); 
 
    -webkit-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    -ms-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
} 
 
.list-icon-wrapper .icon-wrapper p { 
 
    padding: 0 5px; 
 
    font-weight: 500; 
 
    font-size: 18px; 
 
    margin-top: 15px; 
 
    color: #000; 
 
    text-align: center; 
 
    display: inline-block; 
 
}

<div class="list-icon-wrapper"> 
 
    <div class="col-md-4"> 
 
    <div class="icon-wrapper"> 
 
     <span class="aticon"> 
 
        <i class="fa fa-magnet"></i> 
 
       </span> 
 
     <p>Magnet</p> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="icon-wrapper"> 
 
     <span class="aticon"> 
 
        <i class="fa fa-clock-o"></i> 
 
       </span> 
 
     <p>Clock</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

FontAwesome實際呈現:before僞元件上，而不是作爲背景圖像的圖標。我認爲你需要做的只是瞄準那個元素而不是.fa元素。這應該讓你開始。

.icon-wrapper:hover .fa::before { 
    background: #fff; 
    color: #5e8cfa; 
    border: 1px solid #5e8cfa; 
    transition: all 0.6s ease 0s; 
     -webkit-transition: all 0.6s ease 0s; 
     -moz-transition: all 0.6s ease 0s; 
     -ms-transition: all 0.6s ease 0s; 
     -o-transition: all 0.6s ease 0s; 
     display: inline-block; 
} 


.aticon:hover .fa::before { 
    transform-origin: center; 
     -ms-transform-origin: center; 
     -webkit-transform-origin: center; 
    transform: rotate(360deg); 
     -webkit-transform: rotate(360deg); 
     -o-transform: rotate(360deg); 
     -ms-transform: rotate(360deg); 
     -moz-transform: rotate(360deg); 

}