CSS3变换旋转导致铬1px的转变(CSS3 transform rotate causing 1p

我在变换旋转过渡，铬与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; 线把它赶走。

任何人对如何制止这种同时保持页面中心的任何想法？

我使用的版本24.0.1312.57上OSX 10.6.8

干杯

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中。

无论如何，我会建议这种方法代替：

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

这里是更新的小提琴

文章来源: CSS3 transform rotate causing 1px shift in Chrome