css3的问题 transform旋转问题
@-webkit-keyframesrot{0%,20%,40%,60%,80%,100%{transform-origin:topcenter;}0%{transfor...
@-webkit-keyframes rot{
0%,20%,40%,60%,80%,100%{transform-origin:top center;}
0%{transform: rotate(0deg);}
20%{transform:rotate(20deg);}
40%{transform:rotate(-15deg);}
60%{transform:rotate(10deg);}
80%{transform:rotate(-5deg);}
100%{transform:rotate(0deg);}
}
这个旋转效果 在谷歌浏览器看为什么不是以顶部中心点为轴心左右摆动啊
transform-origin:top center;transform: rotate(45deg);这个单独拿出来写付给一个标签，它却是以顶部中心点为轴心旋转一个45°角
这是为什么 展开
0%,20%,40%,60%,80%,100%{transform-origin:top center;}
0%{transform: rotate(0deg);}
20%{transform:rotate(20deg);}
40%{transform:rotate(-15deg);}
60%{transform:rotate(10deg);}
80%{transform:rotate(-5deg);}
100%{transform:rotate(0deg);}
}
这个旋转效果 在谷歌浏览器看为什么不是以顶部中心点为轴心左右摆动啊
transform-origin:top center;transform: rotate(45deg);这个单独拿出来写付给一个标签，它却是以顶部中心点为轴心旋转一个45°角
这是为什么 展开
1个回答
展开全部
并没有出现你描述的情况，谷歌浏览器下，确实是以顶部中心点为轴心左右摆动。
如果你不是，查看下代码，是否样式出现了覆盖的情况。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Document</title>
<style type="text/css">
.rot{-webkit-animation:rot 3s linear;}
@-webkit-keyframes rot{
0%,20%,40%,60%,80%,100%{transform-origin:top center;}
0%{transform: rotate(0deg);}
20%{transform:rotate(20deg);}
40%{transform:rotate(-15deg);}
60%{transform:rotate(10deg);}
80%{transform:rotate(-5deg);}
100%{transform:rotate(0deg);}
}
</style>
</head>
<body>
<img src="pcj/aa/img/h_icon.png" class="rot" />
</body>
</html>
更多追问追答
追问
我刚刚将你代码复制下来，用谷歌浏览器打开，图片还是以对角线相交的中心点左右摆动，用ie也是这种情况
追答
我的代码……用IE9以上版本打开，应该是没有任何效果的。因为我只写了-webkit-。只会在谷歌内核浏览器才有效。其他火狐，IE等都没效果的。
你真的是只复制我的代码打开？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
