代码之家 › 专栏 › 技术社区 › KoboldMines

获取transform的现有值:translateX选项

less css

0

KoboldMines · 技术社区 · 7 年前

这是 <div> 风格:

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

班 translateX

你好,尼克

2 回复 | 直到 7 年前

1

3

Piotr Wicijowski 7 年前

也许你会考虑使用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 .

2

1

××× × ×××× 7 年前

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