转换上的HTML文本对齐问题

Question

我试图在html / css中渲染一行变换文本，但是我有一些问题。当我缩放Y方向时，元素的整体对齐方向如此图所示移动。

尝试将L旋转180度会导致相同的错误。如何在文本的y缩放轴上保持垂直对齐？让我们说我也是这样做的，你的解决方案有什么变化吗？

这里出了什么问题？

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>