變換上的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>