在应用没有 javascript 的新变换值之前获取当前变换值

Question

有什么方法可以连续应用相同的 css 变量吗？或者获取当前 css 属性值然后附加一个新值？我需要这个来对一些嵌套元素应用多个转换。

工作示例需要 2 个单独的父变量和子变量

<style>
  p {
    transform: scale(var(--scale, 1)) scale(var(--parentScale, 1)) ;
  }
</style>
<div style="--parentScale: 0.8">
   <p style="--scale: -1;">Hello</p>
 </div>

但我想这样写（不幸的是，内部 --scale 被父 --scale 取代，留下 'Hello' 未调整大小）

<style>
  p {
    transform: scale(var(--scale, 1));
  }
</style>
<div style="--scale: 0.8">
  <p style="--scale: -1;">Hello</p>
</div>

有什么解决方法吗？如果可能没有 js

Answer 1

在 div 中定义了 --scale 变量，但从未在 div 中使用过。

此代码段将 div 和 p 都设置为具有转换 ，每个都具有其相关的 --scale

div,
p {
  transform: scale(var(--scale, 1));
}

<div style="--scale: 0.8">
  <p style="--scale: -1;">Hello</p>
</div>

更新：评论中有一个澄清，dividual child，而不是父 div，需要 0.8 缩放。

因此，此代码段引入了第二个变量 --childscale，它最初设置为 1 并与 --scale 组合。任何未设置它的 div 不受影响。对于您要查找翻转的 div，-childscale 设置为 -1。

p {
  transform: scale(calc(var(--scale) * var(--childscale)), 1);
}

<div style="--scale: 0.8; --childscale: 1;">
  <p style="--childscale: -1;">Hello</p>
  <p>Hello</p>
</div>

在应用没有 javascript 的新变换值之前获取当前变换值

Get current tranform value before applying the new one without javascript

css

inheritance

transform

css-variables