

YouTubeのtutorialビデオ
[https://youtube.com/watch?v=NSWr6dkc_Xw&t=418s](https://youtube.com/watch?v=NSWr6dkc_Xw&t=418s)
を見て そっくりそのままコピーしながら3Dアニメーションを作ろうとしています。  
ある所まで順調にできました。そこまで出来上がったhtmlとscssが下記の通りです。  
html

[code]

    <div class="banner">
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>
       </div>
    
[/code]

scss

[code]

    body {
        background-color: #000;
        color: #fff;
        min-height: 100vh;
        display: grid;
        place-items: center;
      
    }
    
    .banner {
        display: flex;
    }
    $width: 23px;
    .panel {
        position: relative;
        width: $width;
        height: 110px;
      // border: 1px solid white;
       overflow: hidden;
       animation: rotate 6s infinite ease-in-out;
    }
    
    @keyframes rotate {
        from { transform: rotateX(0deg); }
        to { transform: rotateX(360deg);}
    }
    
    .panel::before {
        position: absolute;
        left: var(--left);
        content: 'Hello World';
        font-size: 96px;
        width: max-content;
        color: hsl(var(--hue), 75%, 75%);
    }
    
    @for $i from 0 to 24 {
        .panel:nth-child(#{$i + 1}) {
            --left: #{$width * $i * -1};
            --hue: #{360 / 24 * $i};
    }
    }
    
    
[/code]

ここからビデオの16:00あたりではbodyの最終に

[code]

    perspective: 500px;
    
[/code]

と書き入れると平面的だったのが立体的になりますが、私が書いたのでは何も変化が起きません。

Windows10を使っています。モニターに映す時chrome,edge,firefoxのどれでやっても何も変化しません。  
どこが悪いのでしょうか？  
よろしくお願いいたします。


CC BY-SA 4.0
2021-12-25T11:33:30.480
85327
2021-12-26T05:10:55.263
2021-12-26T05:10:55.263
32986
50644
question
css scss
3D アニメーション


`.banner` に `transform-style: preserve-3d;` を追加してください。

[code]

    .banner {
      display: flex;
      transform-style: preserve-3d;
    }
    
[/code]

`perspective` を効かせるためには `preserve-3d` を使って 3D レンダリング・コンテキストを作る必要があります。

<https://developer.mozilla.org/ja/docs/Web/CSS/transform-style>

> `transform-style` は CSS のプロパティで、要素の子要素を 3D
> 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。

<https://drafts.csswg.org/css-transforms-2/#3d-rendering-contexts>

> A 3D rendering context is established by a transformable element whose used
> value for `transform-style` is `preserve-3d` and which itself is not part of
> a 3D rendering context. An element that establishes a 3D rendering context
> also participates in that context.

元の動画で参照されている完成品 <https://codepen.io/kevinpowell/pen/abwqBxE>
でも現在は上手く動いていませんし、ちゃんと調べてはいませんが、動画公開時とブラウザの挙動が変わっていそうです。


CC BY-SA 4.0
2021-12-26T03:02:43.303
85333
2021-12-26T03:02:43.303
19110
85327
answer