Chrome中的CSS3转换旋转造成1px的偏移

我有一个css3转换旋转转换的问题。 转换工作正常，但在完成元素移动一个像素之后。 另一个奇怪的是，它只发生在页面居中（ margin:0 auto; ）。 如果您还删除了转换，该错误仍然存​​在。

你可以看到它发生在这里：

http://jsfiddle.net/MfUMd/1/

HTML：

 <div class="wrap"> <img src="https://github.com/favicon.ico" class="target" alt="img"/> </div> <div class="wrap"> <div class="block"></div> </div> 

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

干杯

Answer 1

其实只需将其添加到包含所有元素的网站容器即可： -webkit-backface-visibility: hidden;

应该修复它！

吉诺

Answer 2

我有同样的问题，我通过将以下添加到正在使用转换的div的CSS来解决它：

 -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.0, 1.0); 

背面用于基于3D的转换，但如果您只使用2D，则不需要额外的东西。

Answer 3

身体尺寸和变换结构之间的关系是不寻常的。 其实我并不是因为包含代码预览的小提琴iframe。

无论如何，我会build议这种方法，而不是：

 body{ width:100%; float:left; } .wrap { margin: 50px 45%; width: 5%; float: left; } .block { width:30px; height:30px; background:black; } .target,.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); } 

这里是更新的小提琴