JS「transform: translateZ;」が反映されていない？？

CSS&Javascript Background Animation Effects 2 | Animated Background Image Loop Animationを実装しようとしています。

しかし動画と違った動きになる場所が２か所あり困っています。

具体的には、
<1>動画の様にブロック一つ一つが中心に向かって移動し、文字画面から画像に切り替わるような動きをしない（一つ一つがその場で画像に切り替わる）。
<2>画像に切り替わった後、元の文字画面に切り替わらない（本来なら<1>と逆の動きをする）

html
1<body>
2    <section>
3        <h2>JS Animation</h2>
4        <div class="banner">
5            <div class="blocks"></div>
6        </div>
7    </section>
8
9    <script src="index.js"></script>    
10    
11</body>

css
1@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900&display=swap');
2* {
3    margin: 0;
4    padding: 0;
5    box-sizing: border-box;
6    font-family: 'Poppins', sans-serif;
7}
8body {
9    background: #710c19;
10}
11section {
12    position: relative;
13    width: 100%;
14    height: 100vh;
15    transform-style: preserve-3d;
16    perspective: 500px;
17}
18section h2 {
19    position: relative;
20    width: 100%;
21    height: 100vh;
22    text-align: center;
23    line-height: 100vh;
24    font-size: 10vw;
25    color: #fff;
26    font-weight: 700;
27}
28.banner {
29    position: absolute;
30    top: 0;
31    left: 0;
32    width: 100%;
33    height: 100%;
34    overflow: hidden;
35    display: flex;
36    flex-wrap: wrap;
37}
38.banner .blocks {
39    position: relative;
40    display: block;
41    width: 5vw;
42    height: 5vh;
43    /* background: white; */
44    animation: animate 2s ease-in-out forwards;
45    animation-delay: 1s;
46}
47@keyframes animate {
48    0% 
49    {
50        transform: translateZ(2000px);
51        background: url(main1.png);
52        background-position: center;
53        background-attachment: fixed;
54        background-size: cover;
55        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
56    }
57    100%
58     {
59        transform: translateZ(0px);
60        background: url(main1.png);
61        background-position: center;
62        background-attachment: fixed;
63        background-size: cover;
64        border: 1px solid rgba(0, 0, 0, 0.1);
65        box-shadow: 0 5px 15px rgba(0, 0, 0, 0);
66    }
67}
68
69section.active .banner .blocks {
70    animation: animateTwo 2s ease-in-out forwards;
71    background: url(main1.png);
72    background-position: center;
73    background-attachment: fixed;
74    background-size: cover;
75    border: 1px solid rgba(0, 0, 0, 0.1);
76    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); */
77}
78
79@keyframes animateTwo {
80    0% 
81    {
82        transform: translateZ(0px);
83        background: url(main1.png);
84        background-position: center;
85        background-attachment: fixed;
86        background-size: cover;
87        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
88    }
89    100% 
90    {
91        transform: translateZ(2000px);
92        background: url(main1.png);
93        background-position: center;
94        background-attachment: fixed;
95        background-size: cover;
96        border: 1px solid rgba(0, 0, 0, 0.1);
97        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0);
98    }
99
100}

js
1const banner = document.getElementsByClassName('banner')[0];
2const blocks = document.getElementsByClassName('blocks');
3
4for (var i = 1; i < 400; i++) {
5    banner.innerHTML += "<div class='blocks'></div>";
6    const duration = Math.random() * 5;
7    blocks[i].style.animationDuration = 2+duration+'s';
8    blocks[i].style.animationDelay = duration+'s';
9
10}
11
12const section = document.querySelector('section');
13setTimeout(function() {
14    section.classList.add('active')
15},14000)

■やったこと
・コードの記載ミスをチェックしました。記入ミスは修正しましたが、動きに変化はありませんでした。
・自分なりに読み解いてみました。
cssの「transform: translateZ;」が反映されていないのか、もしくは「transform-style: preserve-3d;」
「perspective: 500px;」あたりも効いていないのではないかと考えました。
しかし具体的な解決には至っていません。

申し訳ありませんが、解決策などありましたら教えていただけると嬉しいです。
よろしくお願いいたします。

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

回答1件

ベストアンサー

以下を追加してみるとどうでしょう？

css
1.banner {
2    transform-style: preserve-3d;
3    perspective: 500px;
4}

投稿2021/10/18 09:00

Lhankor_Mhy

総合スコア36960

suuumo

2021/10/18 12:08

無事動くようになりました！本日も粘ってみたのですが苦戦していたので本当に助かりました。本当に本当にありがとうございました(*^^*)因みにもしよろしければ[.banner]に教えていただいたコードを記載すると動くようになる理由を教えていただけないでしょうか？リファレンスを確認していたのですが、[transform-style: preserve-3d;]は"要素の子要素を 3D 空間に配置すると記載されていたのですが、ということは[.blocks]の親要素である[.banner]にtransform-styleを設定しなければいけない？という事なのでしょうか？

Lhankor_Mhy

2021/10/18 14:10

すみません、私もそのあたりの仕様についてしっかり理解できていないです。3Dレンダリングコンテキストを生成して、子孫要素をすべてコンテキストに含む仕様になっているようですが、子要素でないとレンダリングが適用されない理由はよくわからないです。たぶん、変形が起きていない直接の子要素上の平面に展開されてしまうためだと思うのですが……

suuumo

2021/10/28 00:41

お返事遅れてしまい申し訳ありません。ご回答ありがとうございました！リファレンスなどを読んでも理解できなかったので、Lhankor＿Mhy様のアドバイスの御かげで進める事が出来き本当に助かりました。現段階では完全理解は難しいかもしれませんが、同じようなコードが出てきた場合は親要素含めて考えて進めてみるようにします！本当にありがとうございました！

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