フォント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); 

}