<div>
是以下样式:
<div style="transform: translateX(1565px) translateY(159px) translateZ(0px)">
</div>
我想添加 class ,它可以计算 translateX 的现有值,并从中减去140(例如)。可以这样做吗?
关于尼克,
答案 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。有关--variable
,var(--variable)
及其相关用法的更多详细信息,请参阅docs。
答案 1 :(得分:1)
使用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>
@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);
}
}