transform: translate(0, 0)のアイテムにズラした背景を設置したい

前提

大きさは　b>a

実現したいこと

aの後ろにbのような背景を作成したいです。
codepen
https://codepen.io/yon-s/pen/KKebPgp

発生している問題・エラーメッセージ

aに

css
1opacity: 1;

を設定しているため
aに
transform-style: preserve-3d;
ｂに

css
1 transform: translateZ(-1px);

をつけても背面に行かない

該当のソースコード

HTML
1<div class="box-inner">
2  <section class="section">
3    <div class="box0">
4    </div>  
5  </section>  
6  <section class="section2">
7    <h2 class="section2__ttl">タイトル</h2>
8    <div class="fade-in fade-in-up box">
9      <ul class="box__list">
10        <li class="box__list-item">
11          <div class="box__list-icon">
12            <i class="box__fas fas fa-thumbs-up"></i>
13          </div>
14          <h3 class="box__list-ttl">Good</h3>
15          <p class="box__txt">テキストテキストテキストテキストテキストテキスト</p>
16        </li>
17              <li class="box__list-item">
18          <div class="box__list-icon">
19            <i class="box__fas fas fa-thumbs-up"></i>
20          </div>
21          <h3 class="box__list-ttl">Good</h3>
22          <p class="box__txt">テキストテキストテキストテキストテキストテキスト</p>
23        </li>
24              <li class="box__list-item">
25          <div class="box__list-icon">
26            <i class="box__fas fas fa-thumbs-up"></i>
27          </div>
28          <h3 class="box__list-ttl">Good</h3>
29          <p class="box__txt">テキストテキストテキストテキストテキストテキスト</p>
30        </li>
31              <li class="box__list-item">
32          <div class="box__list-icon">
33            <i class="box__fas fas fa-thumbs-up"></i>
34          </div>
35          <h3 class="box__list-ttl">Good</h3>
36          <p class="box__txt">テキストテキストテキストテキストテキストテキスト</p>
37        </li>
38              <li class="box__list-item">
39          <div class="box__list-icon">
40            <i class="box__fas fas fa-thumbs-up"></i>
41          </div>
42          <h3 class="box__list-ttl">Good</h3>
43          <p class="box__txt">テキストテキストテキストテキストテキストテキスト</p>
44        </li>
45              <li class="box__list-item">
46          <div class="box__list-icon">
47            <i class="box__fas fas fa-thumbs-up"></i>
48          </div>
49          <h3 class="box__list-ttl">Good</h3>
50          <p class="box__txt">テキストテキストテキストテキストテキストテキスト</p>
51        </li>
52      </ul>  
53    </div>
54   </section> 
55</div>

css
1//sass
2.box-inner{
3  padding: 0 15.66vw;
4  color: #E4EAF3;
5}
6.box0{
7  height:100svh;
8  width:100%;
9  background-color: #800080;
10}
11.section2{
12  margin-top:440px;
13  position: relative;
14  &__ttl{
15    font-size: 1.5rem;
16    margin: 0;
17    letter-spacing: 0.1875rem;
18    padding: 152px 74px;
19    background-color: #800080;
20    display: inline-block;
21    position: absolute;
22    right: 0;
23    top: -156px;
24    z-index: 1;
25  }
26}
27.box{
28  margin-left: -15.66vw;
29  margin-right: 183px;
30  margin-top: 156px;
31  padding-right: 304px;
32  padding-left: 15.66vw;
33  padding-top: 116px;
34  padding-bottom: 142px;
35  background-color: #908fb1;
36  box-sizing: border-box;
37  position: relative;
38  transform-style: preserve-3d;
39  &::after {
40    opacity: 1;
41    width: calc(100vw - 15.66vw);
42    content: '';
43    background-color: #bbbcd2;
44    position: absolute;
45    height: calc(100% + 32px);
46    top: -84px;
47    z-index: -1;
48    -webkit-transform: translateZ(-1px);
49    transform: translateZ(-1px);
50  }
51  &__list{
52    display: flex;
53    justify-content: end;
54    flex-wrap: wrap;
55    padding-left: 0;
56    list-style: none;
57    margin-top: -116px;
58    margin-left: -96px;
59  }
60  &__list-item{
61    width: 224px;
62    text-align: center;
63    margin-top: 116px;
64    margin-left: 96px;
65  }
66  &__list-icon {
67    width: 100px;
68    margin: 0 auto;
69  }
70  &__fas{
71    font-size: 56px;
72  }
73  &__list-ttl{
74    margin-top: 16px;
75    margin-bottom: 0;
76    font-size: 1.25rem;
77    font-weight: 600;
78  }
79  &__txt {
80    text-align: left;
81    line-height: 1.65;
82  }
83}
84.fade-in {
85  opacity: 0;
86  transition-duration:2s;
87  transition-property:opacity,transform;
88}
89
90.fade-in-up {
91  transform: translate(0, 50px);
92}
93
94.scroll-in {
95  opacity: 1;
96  transform: translate(0, 0);
97}

JavaScript
1let fadeInTarget = document.querySelectorAll('.fade-in');
2window.addEventListener('scroll', () => {
3  for (let i = 0; i < fadeInTarget.length; i++){
4    const rect = fadeInTarget[i].getBoundingClientRect().top;
5    const scroll = window.pageYOffset || document.documentElement.scrollTop;
6    const offset = rect + scroll;
7    const windowHeight = window.innerHeight; // 現在のブラウザの高さ
8    if (scroll > offset - windowHeight + 150) {
9      fadeInTarget[i].classList.add('scroll-in');
10    }
11  }
12});

aに

css
1transform: translate(0, 0);

がついている理由は

スクロールすると

css
1//スクロール前
2transition-duration:2s;
3transition-property:opacity,transform;
4opacity: 0;
5transform: translate(-50%, 0);
6↓
7//スクロール後
8opacity: 1;
9transform: translate(0, 0);

で表示させているためです。

.aがスクロールのトリガーとなっているため（aの上までスクロールするとaが表示）
aの疑似要素で実現したいとおもっています。

bのほうが大きい(width: calc(100vw - 15.66vw);
height: calc(100% + 32px);
)ため
box-shadowではできませんでした。

試したこと

css
1.a{
2z-index: 100;
3   transform: translate3d(0px, 0px, 200px);
4&::after (b){
5z-index: 10;
6transform: translate3d(0px, 0px, 100px);
7}
8  }
9

補足情報（FW/ツールのバージョンなど）

transformのz軸とz-indexでややこしくなった時の対処法 – 『CSS』
https://webmanab-html.com/tip/transform-z-index-safari-bug/

以上よろしくおねがいします。

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

回答1件

ベストアンサー

transform-style: preserve-3d;で子要素を 3D 空間に配置することによって、translateZ() で背面に移動させることが可能になります。

transform-style - CSS: カスケーディングスタイルシート | MDN

コード例

SCSS
1.a {
2  width: 800px;
3  height: 600px;
4  position: relative;
5  transform: translate(0, 0);
6  background-color: #908fb1;
7  margin-top: 150px;
8  transform-style: preserve-3d;
9  &::after {
10    width: 850px;
11    height: 650px;
12    content: "";
13    position: absolute;
14    top: -100px;
15    right: -100px;
16    z-index: -1;
17    background-color: #bbbcd2;
18    transform: translateZ(-1px);
19  }
20}

[CodePenサンプル](https://codepen.io/hatena19/pen/yLExPGd

追記

質問者さんの現状のコード↓
https://codepen.io/yon-s/pen/KKebPgp

上記は、opacity: 0; で .a要素を透明にしているので、transform-style: preserve-3d;が無効になるので、上の回答の方法ではうまくきません。
また、z-index で疑似要素を親要素の背面に移動させることもできません。

そこで、親要素の背景色を ::before疑似要素に設定するようにして、z-index で前後位置を指定すればうまくいきました。
改良サンプル↓
https://codepen.io/hatena19/pen/KKebKNv

投稿2022/11/30 12:51

編集2022/12/05 05:18

hatena19

総合スコア34362

mumu1354

2022/12/01 03:10 編集

hatena19様ありがとうございます。このCSSでできました。申し訳ありません。自分の記入不足のせいで問題が一つ発生しております。それはスクロールしたときの表示時（読み込み時）にｂが前面になってしまうことです。ｂ前面→a前面　と変換します。理想は読み込み時からa前面です。原因は aに //スクロール前 transition-duration:2s; をつけているからだと思います。ｂにも同様に //スクロール前 transition-duration:2s; transition-property:opacity,transform; opacity: 0; ↓ //スクロール後 opacity: 1; をつけてみたのですが改善されませんでした。この問題を解説する方法をご教授いただけないでしょうか？

hatena19

2022/12/01 09:00

スクロールしたときに表示させるのはJSでしているのでしょうか。それが提示されていないので、推測で回答するしかないですが、スクロール前に aに transform-style: preserve-3d; bに transform: translateZ(-1px); が効いているか確認してはどうでしょうか。効いていれば、bは背面に表示されるはずです。それで分からないなら、JSも含めて現象を再現できるコードを質問に追記してください。

mumu1354

2022/12/01 10:08 編集

hatena19様ご返信ありがとうございます。スクロール前に aに transform-style: preserve-3d; bに transform: translateZ(-1px); は効いておりました。 jsこちらになります。 https://codepen.io/yukinouz1/pen/mdeNQXe aが.fade-in.boxの部分になります

hatena19

2022/12/01 12:02

無駄なやりとりを省くために、現象を再現出るサンプルを提示してもらえませんか。提示のサンプルには、transform-style: preserve-3d;　も　transform: translateZ(-1px); もないです。

hatena19

2022/12/01 12:33

自分のサンプルで確認したところ、opacity を１未満にすると transform-style: preserve-3d; が効かなくなるようです。opacity と transform-style は相性が悪いみたいですね。 > bのほうが大きいためbox-shadowではできませんでした。とのことですが、4番目の引数で広がりを設定できますので、影の大きさも設定できますが、それではだめですか。ぼかし(3番目の引数)を０にすれば同じような見た目にできます。例えば、 box-shadow: 30px -30px 0px 15px #bbbcd2;

mumu1354

2022/12/05 00:28

hatena19様ご返信ありがとうございます。お手数おかけして申し訳ありませんでした。 box-shadowについてですが今回はbを width: calc(100vw - 15.66vw); height: calc(100% + 32px); という形（ｘ，ｙが均等ではない）ですので box-shadowは使えませんでした。ちなみに aにpadding-left: 15.66vw;をつけてbを横にずらしております

hatena19

2022/12/05 00:53

そのように後から情報を小出しにするのではなく、最初から現状のコードを『すべて』提示して、どこが想定と違いうかを明確に説明するようにしてください。無駄なやりとりを何度も繰り返すのは時間の無駄です。

mumu1354

2022/12/05 03:43

hatena19様申し訳ありません。こちらになります https://codepen.io/yon-s/pen/KKebPgp

hatena19

2022/12/05 05:01

質問は編集できますので、質問のそのコードあるいはリンクを追記してください。後から見た人はこのコメント欄までは見ないことが多いので。

mumu1354

2022/12/05 05:19

hatena19様承知しました。教えていただきありがとうございます。