CSS 親にかけたCSSで子には影響与えなくするには

下記コードは親にtransform:scaleY(-1)をかけて反転させています
子の青色のボックスは反転させたくないのですがどうしたらいいでしょうか
親子関係である以上不可能なんでしょうか

<div style="position:relative;width:300px;height:300px;background:red;transform:scaleY(-1)">
<div style="position:absolute;bottom:0%;right:0%;width:100px;height:30px;background:blue;transform:scaleY(1)">test</div>
</div>

退会済みユーザー

2021/10/02 17:52

回答に反応がありませんがどうかされましたか？質問の意図と異なる回答である場合はコメントでその旨お伝え頂き質問文に意図を加筆頂けると助かります。

行動規範の内容に同意します

回答2件

子にtransform:scaleY(-1)を設定すれば、反転の反転でもとに戻ります。

html
1<div style="position:relative;width:300px;height:300px;background:red;transform:scaleY(-1)">
2<div style="position:absolute;bottom:0%;right:0%;width:100px;height:30px;background:blue;transform:scaleY(-1)">test</div>
3</div>

投稿2021/09/30 21:38

hatena19

総合スコア34075

親子関係である以上、無理ではないかと…………。

兄弟関係なら影響しないので、こういう場合はラッパーとなるボックスを用意し、兄弟として z-index で重ねるのではないかと思います。

html
1<html>
2  <head>
3    <style type="text/css">
4      #wrapper {
5        width: 300px;
6        height: 300px;
7
8        position: relative;
9        /* 親要素である`wrapper`が何らかの位置指定をしないと
10         * 子要素の`position: absolute`の座標の原点に
11         * 採用されないので、必ず`static`以外を指定する
12         */
13
14        background: transparent;
15      }
16
17      #big {
18        z-index: 2;
19        position: absolute;
20        width: inherit;  /* 親要素の`wrapper`の幅を継承 */
21        height: inherit; /* 同じく高さを継承 */
22        background: red;
23        transform: scaleY(-1);
24      }
25
26      #small {
27        z-index: 3;
28        position: absolute;
29        right: 0;
30        bottom: 0;
31        width: 100px;
32        height: 30px;
33        background: blue;
34      }
35    </style>
36  </head>
37  <body>
38    <div id="wrapper">
39      <div id="big">
40        反転する
41      </div>
42      <div id="small">
43        反転しない
44      </div>
45    </div>
46  </body>
47</html>