我该怎么做才能使Div Box看起来3D？

Question

我需要做什么才能使代码正常工作？ 我不知道如何使div Box像我在此网站上找到的示例（https://3dtransforms.desandro.com/box）那样具有3D外观，但是没有动画和正面。

abstract class ServiceIf(val name: String) {

   def run(args: Seq[Any]):  Any = {}


class RexecIf extends ServiceIf("Rexec") {

   override def run(args: Seq[Any]) = {
     val Seq(execParams: ExecParams, nLoops: Int) = args

    .section-about {
      background-image: linear-gradient(to right, rgb(173, 56, 1), rgb(209, 144, 3));
      
      padding: 25rem 0;
      position: relative;
     
      width: auto;
      height: auto;
      grid-area: section-about;
      padding-bottom: 25em;
    }
    .heading-secondary {
      font-size: 1rem;
      text-transform: uppercase;
      font-weight: 500;
      letter-spacing: 1rem;
      position:relative;

      word-spacing: 1.8rem;

      text-align: center;
      transition: all .2s;
      color: rgb(250, 228, 129);
      -webkit-color-clip: text;
      text-shadow: 0 0 15px rgb(240, 159, 37);
      z-index: 2;
    }


    .gradient-2 {
      background: linear-gradient(112.18318469755093deg, rgb(197, 148, 41) 15.888253539744033%, rgba(229, 151, 64, 1) 84.94202063708826%);
      position: absolute;
      
      width: 300px;
      height: 200px;
      mix-blend-mode: multiply;
    }
    .box__face--right,
    .box__face--left {
       width: 100px;
      height: 200px;
      background-color: green;
       left: 100px;
       position:absolute;
    }

    .box__face--top,
    .box__face--bottom {
      width: 300px;
      height: 100px;
      top: 50px;
      position:absolute;
      background-color: blue;
    }
    .scene {
    width: 300px;
      height: 200px;
      perspective: 500px;
      
      margin: 40px;
    }

    .box {
       width: 200px;
      height: 300px;
      position: relative;
      
      transform-style: preserve-3d;
      transform: translateZ(-50px);
    }

    box__face--right  { transform: rotateY( 90deg) translateZ(150px); }
    .box__face--left   { transform: rotateY(-90deg) translateZ(150px); }

    .box__face--top    { transform: rotateX( 90deg) translateZ(100px); }
    .box__face--bottom { transform: rotateX(-90deg) translateZ(100px); }

    .heading-secondary-background {
      background: rgb(43, 43, 43);
     
     
      position:absolute;
      width: 300px;
      height: 200px;
     
      
     
    }