Take existing value of transform: translateX option - css

Question

Here is <div> with style:
<div style="transform: translateX(1565px) translateY(159px) translateZ(0px)">
</div>
I want to add class that can calculate existing value of translateX and subtract 140(for example) from it. Is it possible to do that?
Regards, Nick

Answer 1

Maybe you would consider using css variables? With them you can define just the offset value in a class, and use that value inside the main class that calculates the actual translation. In the example below you can see that i defined small utility classes just modify the offset value.
/* 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>
Unfortunately, the support for css variables is 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.

Answer 2

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