取得transform的现有值：translateX选项

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。

Answer 2

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