Возьмите существующее значение transform: опция translateX

Question

Вот <div> со стилем:

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

Я хочу добавить класс , который может вычислить существующее значение 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 не идеальна , поскольку IE вообще не поддерживается.Для получения более подробной информации об использовании --variable, var(--variable) и связанных с ними, пожалуйста, обратитесь к документам .

Answer 2

Использование calc()

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

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

С медиа-запросом:

.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>

Использование Less и параметр:

@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);
  }
}