取 transform: translateX 选项的现有值

Question

这是 <div> 样式：

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

我想添加 class 可以计算 translateX 的现有值并从中减去 140（例如） .可以吗？

问候，尼克

Answer 1

使用calc()

.decrease{
transform: translateX(calc(1565px - 140px)) translateY(159px) translateZ(0px);
}

<div class="decrease">
div
</div>

With media-query:

.decrease{
    transform: translateX(1565px) translateY(159px) translateZ(0px);
}

@media only screen and (max-width: 600px) {
  .decrease {
     transform: translateX(calc(1565px - 140px)) translateY(159px) translateZ(0px);
  }
}

<div class="decrease">
    div
</div>

Using Less and parameter:

@translateX : 1565px;
.decrease{
    transform: translateX(@translateX) translateY(159px) translateZ(0px);
}

@media only screen and (max-width: 600px) {
  .decrease {
     transform: translateX(calc(@translateX - 140px)) translateY(159px) translateZ(0px);
  }
}

Answer 2

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

/* 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, as IE is not supported at all. For more details about usage of --variable, var(--variable) and related, please refer to the docs。

取 transform: translateX 选项的现有值

Take existing value of transform: translateX option

css

less