{
backface-visibility:hidden
-webkit-backface-visibility:hidden /* Chrome 和 Safari */
-moz-backface-visibility:hidden /* Firefox */
-ms-backface-visibility:hidden /* Internet Explorer */
}
楼主可以试试这个,隐藏被旋转的 div 元素的背面
在css中设置一个 样式clear{clear:both}清除左右浮动,在想清除浮动的地方引入一个css样式即可;clear:both是清除左右浮动
clear:left清除左浮动
clear:rigth清除右浮动;
并没有出现你描述的情况,谷歌浏览器下,确实是以顶部中心点为轴心左右摆动。
如果你不是,查看下代码,是否样式出现了覆盖的情况。
<!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>