CSS3变换旋转导致Chrome中的1px偏移
CSS3变换旋转导致Chrome中的1px偏移
提问于 2013-02-06 20:48:30
我在chrome中遇到了一个css3变换旋转过渡的问题。转换运行良好，但就在它完成之后，元素移动了一个像素。另一件奇怪的事情是，只有当页面居中(margin:0 auto;)时才会发生这种情况。如果您也删除了转换，错误仍然存在。
你可以在这里看到它的发生：
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
干杯
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-03-26 04:15:49
实际上，只需将以下内容添加到站点容器中即可，该容器包含所有元素：-webkit-backface-visibility: hidden;
应该可以解决这个问题！
吉诺
Stack Overflow用户
发布于 2014-04-07 17:27:09
我也遇到了同样的问题，我将以下代码添加到使用转换的div的css中，从而修复了这个问题：
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);Backface用于基于3D的过渡，但如果您只使用2D，则不需要额外的东西。
Stack Overflow用户
发布于 2013-02-06 23:59:09
在身体尺寸和变换结构之间的关系中有一些不寻常的东西。我没有，实际上是因为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);
}以下是更新后的fiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14729492
复制相关文章
相似问题