CSS CSS3 变换旋转导致 Chrome 中的 1px 偏移
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14729492/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 transform rotate causing 1px shift in Chrome
提问by DonutReply
I'm having an issue in chrome with a css3 transform rotate transition. The transition is working fine but just after it finishes the element shifts by a pixel. The other strange thing is that it only happens when the page is centered (margin:0 auto;). The bug is still there if you remove the transition as well.
我在 chrome 中遇到了 css3 变换旋转过渡的问题。过渡工作正常，但在它完成后元素移动一个像素。另一个奇怪的事情是它只在页面居中时发生 ( margin:0 auto;)。如果您也删除过渡，该错误仍然存在。
You can see it happening here:
你可以看到它发生在这里：
HTML:
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:
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);
}
Comment out the margin:0 auto;line to make it go away.
注释掉该margin:0 auto;行以使其消失。
Anyone have any ideas of how to stop this while keeping the page centered?
任何人都知道如何在保持页面居中的同时阻止这种情况？
I'm using Version 24.0.1312.57 on OSX 10.6.8
我在 OSX 10.6.8 上使用版本 24.0.1312.57
Cheers
干杯
回答by Gino
Actually just add this to the site container which holds all the elements:
-webkit-backface-visibility: hidden;
实际上只需将此添加到包含所有元素的站点容器中：
-webkit-backface-visibility: hidden;
Should fix it!
应该修！
Gino
吉诺
回答by James
I had the same issue, I fixed it by adding the following to the css of the div that is using the transition:
我遇到了同样的问题，我通过将以下内容添加到使用过渡的 div 的 css 来修复它：
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
Backface is used for 3D-based transitions but if you are only using 2D there is no need for the extra stuff.
背面用于基于 3D 的过渡，但如果您只使用 2D，则不需要额外的东西。
回答by wandarkaf
there is something unusual in the relation between the body dimension and the structure of the transform. I don't in fact is because the fiddle iframe that contains the preview of the code.
身体尺寸和变换结构之间的关系有些不寻常。我实际上不是因为包含代码预览的小提琴 iframe。
Anyway, I will suggest this approach instead:
无论如何，我会建议这种方法：
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);
}
Here is the updated fiddle
这是更新的小提琴
