Google chrome CSS3变换旋转导致Chrome中的1px偏移

我在chrome中遇到了一个css3转换-旋转转换的问题。过渡工作正常，但刚完成后，元素移动了一个像素。另一件奇怪的事情是，它只在页面居中时发生（

margin:0auto；

）。如果您也删除了转换，那么bug仍然存在

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

HTML:

注释掉

页边距：0自动行以使其消失

有人知道如何在保持页面居中的同时阻止这种情况吗

我在OSX 10.6.8上使用24.0.1312.57版

干杯
身体维度和变换结构之间的关系有些不同寻常。事实上，我不这么认为是因为fiddle iframe包含了代码的预览

无论如何，我建议采用这种方法：

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);  
}

下面是更新的
实际上只需将其添加到包含所有元素的站点容器中：
-webkit背面可见性：隐藏

应该修好它

Gino
我也有同样的问题，我通过在使用转换的div的css中添加以下内容来修复它：

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

背面用于基于3D的过渡，但如果您仅使用2D，则不需要额外的内容。
我没有注意到块中的移动。在Chrome 24.0.1312.57中两者都无法复制，在转换完成后将1px向上移动我在Chrome 24上看到了OSX-这非常明显，我现在似乎已经停止了，不知道这是什么美丽，谢谢！它没有为我工作，因为是，但添加供应商前缀修复它。谢谢！当我在Chrome中进行简单的不透明度转换时，我在1px转换上也遇到了同样的问题。添加-webkit背面可见性：隐藏到容器中修复了所有问题。编辑答案以包含
-webkit-
前缀。以前没有，因此上面的评论。有人知道为什么这样做吗？我觉得在不理解css的情况下把东西放进css很奇怪。这在Firefox中也发生过，所以我不确定这只是一个Chrome的东西。感谢
转换的补充，这个答案解决了我的问题。天哪，这在我尝试的一个完全不相关的转换上起了作用；但既然你提到了“基于3D的过渡”，我就试一试。瞧。。。谢谢@弗雷德克：只要把它添加到你的变换值列表中就行了。在我的例子中，添加
translateZ（0）
就足够了。
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);  
}

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