css3的rotate旋转在安卓微信H5中失效

adam806514395 使用 HTML5 构建应用布局... 最后由 adam806514395 于2016年08月26日回复

  • 2 回答
  • 1.7k 浏览

如何让css3的rotate旋转特效在微信H5中生效?我在ios和web上测试都有效果,只在安卓微信中没有效果,-webkit-前缀也已经加上了,求各位帮帮看看代码哪里有问题,H5急着上线,谢谢了!代码如下:

html:

<img class="btn-music" src="http://opponplusgroup.oss-cn-hangzhou.aliyuncs.com/R9Summer/img/disk.png">

css:

.btn-music{
position: fixed;
width:8%;
height:4%;
right:20%;
top:5%;
-webkit-animation:musicBtn 3s infinite linear;
animation:musicBtn 3s infinite linear;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

@keyframes musicBtn {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
  • 极客学院_ASMITA 2016年08月15日 回答 #1楼
  • @keyframes musicBtn {
    0%{
    transform: rotate(0deg);
    }
    100%{
    transform: rotate(360deg);
    }
    } @-webkit-keyframes musicBtn { 0%{ -webkit-transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); } }
  • 0 评论