我使用下面的CSS来实现我在桌面浏览器（Edge和Chrome）上想要的旋转标题：

为此，我使用以下样式：

.table-rotated-header {
  writing-mode: vertical-rl;
  top: 100%;
  text-orientation: mixed;
  left: 50%;
  white-space: nowrap;
  text-align: start;
  vertical-align: middle !important;
  transform: rotate(180deg);
}

问题是，当我在Safari或iPhone上的Chrome上查看时，标题是颠倒的。我试过使用-webkit-transform值，但似乎没有任何效果。
我试过使用-webkit-transform：使用不同的值旋转，但即使在iPhone上清除缓存，它也不会改变文本方向。
如何在桌面和iPhone浏览器上实现像图像中一样的旋转标题？