HTML CSS JS

<div class="track"></div>

:root {
    --perspective: 300px;
    --track-width: 100dvw;
    --track-height: 100dvh;
    --track-rotation: 45deg;
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    overflow: hidden;
  }

  body {
    position: relative;

    width: 100dvw;
    height: 100dvh;
    margin: 0;

    display: grid;
    justify-items: center;

    perspective: var(--perspective);

    background-color: black;
  }

  .track {
    position: absolute;
    bottom: 0;

    width: var(--track-width);
    height: var(--track-height);

    rotate: x var(--track-rotation);
    transform-origin: center bottom;

    border: 0.5rem dashed yellow;
  }

import Knobs from "https://esm.sh/@yaireo/knobs";

  var settings = {
    theme: {
      position: "top right",
    },
    visible: 1,
    CSSVarTarget: document.querySelector(":root"),
    knobs: [
      ["Body", true],
      {
        cssVar: ["perspective", "px"],
        label: "Perspective",
        labelTitle: "Changes the perspective of the body",
        type: "range",
        min: 0,
        max: 2000,
        step: 1,
      },
      ["Track", true],
      {
        cssVar: ["track-width", "dvw"],
        label: "Width",
        labelTitle: "Changes the width of the track",
        type: "range",
        min: 0,
        max: 200,
        step: 1,
      },
      {
        cssVar: ["track-height", "dvh"],
        label: "Height",
        labelTitle: "Changes the height of the track",
        type: "range",
        min: 0,
        max: 300,
        step: 1,
      },
      {
        cssVar: ["track-rotation", "deg"],
        label: "Rotation",
        labelTitle: "Changes the rotation of the track along the X axis",
        type: "range",
        min: 0,
        max: 360,
        step: 1,
      },
    ],
  };

  var penKnobs = new Knobs(settings);