Problem with CSS 3D

Hello, I’m trying to build a div that would look like a mp3 player and also I would like to make an effect that user is looking on it a little bit from the bottom. Here is my CSS code:

body {
  perspective: 700px;
}

.music-container {
  background-color: var(--dark);
  position: relative;
  width: 300px;
  height: 100px;
  border: 1px solid #000;
  transform: rotateX(20deg);
  transform-style: preserve-3d;
}

.music-container::after {
  content: '';
  background: green, var(--light-red));
  width: 100%;
  height: 20px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: bottom;
  transform: rotateX(90deg);
}