转换时的 HTML 文本对齐问题

Question

我正在尝试在 html/css 中呈现一行转换后的文本，但是我遇到了一些问题。当我缩放 Y 方向时，元素的整体对齐方式会发生变化，如图中所示。

尝试将 L 旋转 180 度会导致相同的错误。如何保持文本在 y 轴上的垂直对齐？假设我也用小型大写字母来做这个，你的解决方案有什么变化吗？

这里出了什么问题？

<style type="text/css" media="screen">
    #reflect{
    	display: flex;
    	flex-basis: auto;
    }
    #reflectl {
    	/*transform: scaleX(-1) !important;*/
    	transform: scale3d(-1,-1, 1);  !important;
    }
    #reflecte {
      	transform: scaleX(-1) !important;
    }
    #reflectc {
      	transform: scaleX(-1) !important;
    }
</style>

<text id=reflect>
  <text id="reflectref">REF</text>
  <text id="reflectl">L</text>
  <text id="reflecte">E</text>
  <text id="reflectc">C</text>
  <text id="reflectt" >T</text>
</text>

Answer 1

问题似乎是该元素比它包含的文本高，所以当您旋转时，旋转中心不正好在中间，所以当它完成时文本会稍微偏离。最简单的解决方案是将元素的高度设置为它需要的高度。

<style type="text/css" media="screen">
    #reflect{
    	display: flex;
    	flex-basis: auto;
    }
    #reflect text {
        height: 17px;
    }
    #reflectl {
    	/*transform: scaleX(-1) !important;*/
    	transform: scale3d(-1,-1, 1);  !important;
    }
    #reflecte {
      	transform: scaleX(-1) !important;
    }
    #reflectc {
      	transform: scaleX(-1) !important;
    }
</style>

<text id=reflect>
  <text id="reflectref">REF</text>
  <text id="reflectl">L</text>
  <text id="reflecte">E</text>
  <text id="reflectc">C</text>
  <text id="reflectt" >T</text>
</text>

<style type="text/css" media="screen">
    #reflect{
    	display: flex;
    	flex-basis: auto;
    }
    #reflect text {
        height: 17px;
    }
    #reflectl {
    	/*transform: scaleX(-1) !important;*/
    	transform: scale3d(-1,-1, 1);  !important;
    }
    #reflecte {
      	transform: scaleX(-1) !important;
    }
    #reflectc {
      	transform: scaleX(-1) !important;
    }
</style>

<text id=reflect>
  <text id="reflectref">ref</text>
  <text id="reflectl">l</text>
  <text id="reflecte">e</text>
  <text id="reflectc">c</text>
  <text id="reflectt" >t</text>
</text>