转动我的标志在网站上

我有一个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

转动我的标志在网站上

回答

相关问题