transform3d在改变后没有改变

Question

这是默认代码：

<div style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); width: 337px; height:480px; opacity: 1;" class="events-item one-four onsite technical isotope-item">
    <div class="events-image"> <img src="img/01_th.jpg"  alt="events 1"> </div>
    <a href="" title="MYB V3.0" class="open-project">
    <div class="project-overlay">
      <div class="project-info">
        <div class="zoom-icon"></div>
        <h4 class="project-name">MYB V3.0</h4>
        <p class="project-categories">Onsite</p>
      </div>
    </div>
    </a> 
</div>

当我改为：

<div style="position: absolute; left: 337px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); width: 337px; height:480px; opacity: 1;" class="events-item one-four onsite technical isotope-item">
  <div class="events-image"> <img src="img/01_th.jpg"  alt="events 1"> </div>
  <a href="" title="MYB V3.0" class="open-project">
    <div class="project-overlay">
      <div class="project-info">
        <div class="zoom-icon"></div>
        <h4 class="project-name">MYB V3.0</h4>
        <p class="project-categories">Onsite</p>
      </div>
    </div>
  </a> 
</div>

没有任何改变

当我在浏览器中检查元素时，它会显示默认代码 像这样： 任何人请帮忙

Answer 1

所以我刚用你的代码做了一个模型，很难用这么小的样本来判断你的问题究竟是什么，这个代码周围的元素，以及你没有提供给我们看的css类可能非常很有意思，我没有看到这是我发现的。

您已分配了chrome://flags/#disable-direct-write ，但元素上没有width: 337px，因此根本不显示。当我向元素提供height时，将height: 200px中的x位置更改为translate3d 337px`。

再一次，考虑到您提供的小代码示例，我知道您已经在标记末尾的众多类中指定了一个高度，有关更详细的帮助，请为我和我提供更多信息可以深入了解。

祝你好运！

旁注：

良好的CSS实践是避免将样式属性用于除原型之外的任何事情，创建CSS类更加模块化并允许更好的代码重用。

<强>更新

我运行了您在Google Chrome浏览器中发布的新代码。 337px. The object did shift right按预期运行，并将div的xPos移动337px。

以下是一些截图：

没有337px偏移的结果

337px偏移的结果

正如您所看到的那样，您正在添加的偏移正在发生，但似乎transform3d还不是普遍支持的标记，如果偏移影响是您想要实现的，那么有更多传统方法可以实现此目的，例如transform3d