取得transform的现有值:translateX选项

时间:2018-12-25 08:43:17

标签: css less

<div>是以下样式:

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

我想添加 class ,它可以计算 translateX 的现有值,并从中减去140(例如)。可以这样做吗?

关于尼克,

2 个答案:

答案 0 :(得分:3)

也许您会考虑使用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。有关--variablevar(--variable)及其相关用法的更多详细信息,请参阅docs

答案 1 :(得分: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);
  }
}