css - 取 transform : translateX option 的现有值

Question

这里是 <div>风格:

<div style="transform: translateX(1565px) translateY(159px) translateZ(0px)">
</div>

我想添加 class 可以计算 translateX 的现有值并从中减去 140(例如)。有可能吗？

问候，尼克

Answer 1

也许您会考虑使用 css 变量？使用它们，您可以只在类中定义偏移值，并在计算实际翻译的主类中使用该值。在下面的示例中，您可以看到我定义了一些小实用程序类，只是修改了偏移值。

/* for visual purposes */
.box {
width: 50px;
height: 50px;
background-color: grey;
margin: 10px;
}

.box{
  --offset: 0px;
  transform: translateX(calc(15px + var(--offset))) translateY(2px) translateZ(0px);
}

.smallOffset{
  --offset: 10px;
}

.bigOffset{
  --offset: 40px;
}

.negativeOffset{
  --offset: -20px;
}

<div class="box"></div>

<div class="box smallOffset"></div>

<div class="box bigOffset"></div>

<div class="box negativeOffset"></div>

不幸的是，对css变量的支持是not perfect ，因为根本不支持 IE。更多关于--variable、var(--variable) 及相关用法的详细信息，请引用docs .