如何链接 parent 和 child css 转换变量

Question

在下面的示例中，只有第一个 Hello 的大小减小到 0.8。第二个保持其原始比例（1，-1）忽略 parent 变换。

我希望链接 parents 转换。

我知道我可以直接在 div 上应用转换，它会同时影响两个 children 但我希望每个 children 独立转换而不是一起转换为什么我在这里使用 css 变量（它很微妙但有区别）检查 here 以查看它

我需要一些方法来做到这一点，只保留一个 css var（因为我将有多个嵌套的 divs，在内部段落上应用了不同的连续转换）。

非常感谢任何想法，如果确实需要，将使用 js。

p { transform: var(--transf); }

<div style="--transf: scale(0.8)">
      <div><p>Hello</p></div>
      <div style="--transf: scale(1,-1);"><p>Hello</p></div>
</div>

Answer 1

也许这对你有用。

我似乎找不到“链接”转换函数字符串的方法。

但是您可以设置默认值的基础并对 p 元素应用许多转换，并在每个级别设置适当的值，这可能会由于级联而产生连锁效应。[=13=]

/* You can extend this for as many properties as you need*/
div.base {
  --scaleX : 1;
  --scaleY : 1;
  --rotate : 0deg;
  --translateX : 0px;
  --translateY : 0px;
}

div div {
  width: 200px;
}

/* Likewise you can extend the transform function as you need*/
p {
  border: 1px dashed gray;
  transform: scale(var(--scaleX), var(--scaleY))
             rotate(var(--rotate)) 
             translate(var(--translateX), var(--translateY));
}

<div class="base">
  <div style="--scaleX:.8; --rotate:45deg; --translateX:80px;">
    <p>Hello 1</p>
  </div>
  <div style="--scaleY:-1;">
    <p>Hello 2</p>
  </div>
  <div style="--scaleX: .5; --scaleY:.5; --rotate:60deg;">
    <p>Hello 3</p>
  </div>
</div>

如何链接 parent 和 child css 转换变量

How to chain parent and child css transform vars

html

javascript

css

inheritance

css-variables