Javascript 如何链接父子css变换变量

发布于05月20日

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

我希望将父变换链接起来.

我知道我可以直接在div上应用转换，它会同时影响两个子级，但我希望每个子级都独立地进行转换，而不是一起进行转换，这就是为什么我在这里使用css变量(这很微妙，但有区别)选中here查看它

我需要某种方法来做到这一点，只保留一个css变量(因为我将有多个嵌套div，在内部段落上应用不同的连续变换).

请任何 idea 是真的很感激，将使用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>

推荐答案

也许这对你有用.

我似乎找不到一种方法来"链接"转换函数的字符串.

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

/* 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>