轉動我的標誌在網站上

我有一個WordPress站點：http://powersmart.tech/wordpress/轉動我的標誌在網站上

我希望我的網站標誌旋轉這樣的：https://www.dropbox.com/s/b2h29c8zdpfmuvi/video-1477647190.mp4?dl=0

我已經作出了標誌使用下面的代碼在一個圓圈旋轉：

#Top_bar #logo img { 
-webkit-animation:spin 4s linear infinite; 
-moz-animation:spin 4s linear infinite; 
animation:spin 4s linear infinite; 
} 
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
@keyframes spin { 100% { -webkit-transform: rotate(360deg); 
transform:rotate(360deg); } }

請指導我。

感謝

來源

2016-10-28 Hussnain Cheema

這不是一個旋轉的動畫，而是將scaleX。 – Roberrrt

請檢查此鏈接： - http://stackoverflow.com/questions/16771225/css3-rotate-animation –

您使用了錯誤的改造型，這是使用scaleX而不是rotate實現。我做了一個小的演示這應該是如何工作的：

#logo { 
 
    margin: 50px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    -webkit-animation: spin 1s linear infinite; 
 
    -moz-animation: spin 1s linear infinite; 
 
    animation: spin 1s linear infinite; 
 
} 
 

 
@-moz-keyframes spin { 
 
    50% { 
 
     -moz-transform: scaleX(0.1); 
 
    } 
 
} 
 

 
@-webkit-keyframes spin { 
 
    50% { 
 
     -webkit-transform: scaleX(0.1); 
 
    } 
 
} 
 

 
@keyframes spin { 
 
    50% { 
 
     -webkit-transform: scaleX(0.1)); 
 
     transform: scaleX(0.1); 
 
    } 
 
}

<div id="logo"> hi </div>

來源

2016-10-28 09:51:42 Roberrrt

轉動我的標誌在網站上

回答

相關問題