変換でのHTMLテキスト整列の問題

Question

変換されたテキストの行をhtml/cssでレンダリングしようとしていますが、いくつか問題があります。私がY方向にスケールすると、要素の全体的な配置がこの図のようにシフトします。同じエラーでL 180度の結果をわずかに回転しようと

。テキストのyスケーリング軸の垂直方向の配置を維持するにはどうすればよいですか？私も小さな帽子でこれを行うとしましょう、あなたのソリューションの変更？

ここで何が問題になりますか？

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