透视属性在我的 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> 

SCSS

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;

他屏幕上出现的东西立即改变了它的图像，但什么也没发生 矿。 我的电脑在 Windows 10 上运行，我尝试通过 Google Chrome、Microsoft Edge、Mozilla Firefox 阅读“index.html”，但是 都失败了。

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

Answer 1

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