CSS3转换旋转导致Chrome中1px偏移

ruarlubt 于 2023-01-18 发布在 CSS3

关注(0)|答案(5)|浏览(214)

我在chrome中遇到了一个css3 transform rotate过渡的问题。过渡工作正常，但是在它完成后元素移动了一个像素。另一个奇怪的事情是，它只发生在页面居中（margin:0 auto;）的时候。如果你也删除了过渡，这个错误仍然存在。
你可以看到它发生在这里：
http://jsfiddle.net/MfUMd/1/
超文本：

<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
干杯

css

来源：https://stackoverflow.com/questions/14729492/css3-transform-rotate-causing-1px-shift-in-chrome

5条答案

按热度按时间

ckocjqey1#

实际上，只需将其添加到包含所有元素的站点容器中：-webkit-backface-visibility: hidden;
应该修好它！
吉诺

赞(0）回复(0）举报 2023-01-18

xn1cxnb42#

我遇到了同样的问题，我通过向使用过渡的div的css添加以下内容来修复它：

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

背面用于基于3D的过渡，但如果你只使用2D，就不需要额外的东西。

赞(0）回复(0）举报 2023-01-18

5n0oy7gb3#

元素上的will-change: transform;对我在2022（Chrome）中有帮助。缩放动画后元素内的文本不再有1px的移位。

赞(0）回复(0）举报 2023-01-18

kuuvgm7e4#

在转换的主体维度和结构之间的关系中有一些不寻常的东西。事实上我没有，是因为包含代码预览的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

赞(0）回复(0）举报 2023-01-18

enyaitl35#

对于3D变换，请使用以下命令：

-webkit-transform: perspective(1px) scale3d(1.1, 1.1, 1);
transform: perspective(1px) scale3d(1.1, 1.1, 1);

赞(0）回复(0）举报 2023-01-18

我来回答

CSS3转换旋转导致Chrome中1px偏移

5条答案

相关问题

热门标签

最新问答