我在chrome中遇到了css3转换旋转过渡的问题。 过渡效果很好,但是在完成过渡后,元素移位了一个像素。 另一个奇怪的是,它仅在页面居中时才会发生(margin:0 auto;)。 如果同时删除过渡,该错误仍然存在。
您可以在这里看到它的发生:
[http://jsfiddle.net/MfUMd/1/]
HTML:
CSS:
.wrap {
margin:50px auto;
width: 100px;
}
.block {
width:30px;
height:30px;
background:black;
}
.target,.block {
display:block;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
注释掉margin:0 auto;行以使其消失。
任何人都有任何想法如何在保持页面居中的同时停止此操作?
我在OSX 10.6.8上使用版本24.0.1312.57
干杯