我有一个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); } }
请指导我。
由于
答案 0 :(得分:1)
您使用了错误的转化类型,这是使用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>
&#13;