透视属性在我的 SCSS 上不起作用

Question

我是个初学者。我在写HTML和SCCS，只是复制了我们老师展示的代码。他在添加一些句子，我一个接一个地跟着，检查新代码是否像他建议的那样有效。我已经取得了成功，以下是当时的HTML和SCSS：

HTML

<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> 

scs-

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};
}
}

然后他添加了

perspective: 500px;

到SCSS中的主体，如下所示：

place-items: center;
perspective: 500px;

他屏幕上出现的东西立即改变了画面，但什么也没发生矿我的电脑运行在Windows10上；index.html"；通过Google Chrome、Microsoft Edge、Mozilla Firefox全部失败。

我确实想自己完成他的3D动画。请帮帮我。

Answer 1

将perspective: 500px;添加到.banner类