Question

我在使用css3转换旋转转换的chrome中遇到问题。转换工作正常，但在完成后元素移动一个像素。另一个奇怪的事情是它只在页面居中时发生（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

干杯

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

以下是更新后的fiddle

CSS3变换旋转导致Chrome中的1px移位

3 个答案: