如何解决css3 过渡引起的页面晃动

html-css08

如何解决css3 过渡引起的页面晃动,第1张

div

{

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>