Rotating parent div in perspective without affecting inner div

Question

I have been attempting to get this working for a while, to no avail. I am attempting to make the child's rotation independent from parent. I have attempted rotating the child back, however rotateX does not function like the other axis.

I am unable to provide real code, but I made this for the sake of asking the question:

.test {
  perspective: 45rem;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  color: white;
  width: 1000px;
  height: 400px;
  
  transform: rotateX(60deg);
}

.child {
  font-size: 4rem;
  background-color: red;
  transform: rotateX(-60deg);
}

<div class="parent">
  <div class="child">
    TEST
  </div>
</div>

Example without trying to rotate child.

Example with trying to rotate child.

The goal in mind is something like this