gpt4 book ai didi

css - 取 transform : translateX option 的现有值

转载 作者:太空宇宙 更新时间:2023-11-03 21:05:19 26 4
gpt4 key购买 nike

这里是 <div>风格:

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

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

问候,尼克

最佳答案

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

关于css - 取 transform : translateX option 的现有值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53920721/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com