在下面的示例中，只有第一個 Hello 的大小減小到 0.8。第二個保留其原始比例（1，-1），忽略父變換。
我希望父母轉換被鎖住。
我知道我可以直接在 div 上應用轉換，它會同時影響兩個孩子，但我希望每個孩子獨立轉換，而不是一起轉換，這就是我在這里使用 css vars 的原因（它很微妙，但有區別）在這里查看
我需要一些方法來做到這一點，只保留一個 css var（因為我將有多個嵌套的 div，并在內部段落上應用不同的連續變換）。
請任何想法都非常感謝，如果真的需要，將使用 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>uj5u.com熱心網友回復：
也許這對你有用。
我似乎找不到“鏈接”轉換函式字串的方法。
但是您可以設定默認值的基礎并對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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/479836.html
標籤：javascript html css 遗产 css 变量
下一篇：抽象類繼承串列中的約束