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 class是的，您没有让我们看到很可能会产生我没有看到的不同，但这是我发现的。

您已分配 width: 337px，但元素上没有 height，因此它根本不会显示。当我给元素一个 height: 200px，并将 translate3d 中的 x 位置更改为 337px. The object did shift right337px`。

再一次，鉴于您提供的小代码示例，就我所知，您已经在标签末尾的许多 classes 之一中指定了高度，如需更详细的帮助，请提供更多信息给我，我可以深入了解一下。

祝你好运！

旁注：

好的 CSS 做法是避免将 style 属性用于原型制作以外的任何东西，创建 CSS class 更加模块化并允许更好的代码重用。

更新

我运行您在 google chrome 浏览器中发布的新代码。 transform3d 按预期运行，将 div 的 xPos 移动了 337px。

以下是部分截图：

没有 337px 偏移的结果

偏移量为 337px 的结果

如您所见，您正在添加的偏移量正在发生，但似乎 t运行sform3d 还不是一个普遍支持的标签，如果偏移量影响是您想要实现的，那么有很多更传统的方法来实现这一点，例如 left: 337px

transform3d 修改后不变

transform3d not changing after alteration

html

css

transform