如何才能使div X在div的A、B、C、D等元素中始终保持相同的方向，其中每个元素都有不同的转换:rotate()？

<div class="parent-container">
  <div class="child-element" id="elementA">A</div>
  <div class="child-element" id="elementB">B</div>
  <div class="child-element" id="elementC">C</div>
  <div class="child-element" id="elementD">D</div>
  <div class="child-element" id="elementX">X</div>
</div>

.parent-container {
  position: relative;
  transform-origin: center center;
}

.child-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#elementA {
  transform: rotate(45deg);
}

#elementB {
  transform: rotate(90deg);
}

#elementC {
  transform: rotate(135deg);
}

#elementD {
  transform: rotate(180deg);
}

#elementX {
  transform: rotate(225deg);
}