Html 如何将div文本翻转回正常状态？

我试图将聊天泡泡中的文字翻转回正常状态。注意：我使用transform:scaleX（-1）翻转div；为了让它看起来正确的一面。但后效也会翻转我的文字！我现在整天都在做这件事，有没有人能简单地解决这个问题。或者如果可能的话，你知道如何翻转div chat clip.png而不是hold吗

Thx yummi

正文{
背景色：#6b；
利润率：50像素；
字体系列：Arial；
颜色：暗灰色；
字体大小：14px；
线高：.3；
字母间距：.5px；
}   
.聊天室{
位置：绝对位置；
高度：200px；
宽度：400px；
填充顶部：20px；
左侧填充：50px；
边界半径：0px 0px 30px 30px；
背景色：rgba（0,0,0,4）；
}
.泡泡{
位置：绝对位置；
最大宽度：200px；
填充：10px；
填充顶部：0px；
边界半径：0px 20px 20px 20px；
背景色：rgba（0,0,0,3）；
}
.泡泡糖2{
位置：绝对位置；
转换：scaleX（-1）；
最大宽度：200px；
填充：10px；
填充顶部：0px；
边界半径：0px 20px 20px 20px；
背景色：rgba（0,0,0,3）；
}
查特克斯先生{
字体系列：Arial；
颜色：灰色；
字体大小：12px；
线高：1.2；
字母间距：.5px；
}
.对{
右：50px；
}
.翻转{
变换：比例（-1,1）；
}

尤米：谢谢你的甜心 只需将span添加到文本中，然后再次翻转它


正文{
背景色：#6b；
利润率：50像素；
字体系列：Arial；
颜色：暗灰色；
字体大小：14px；
线高：.3；
字母间距：.5px；
}   
.聊天室{
位置：绝对位置；
高度：200px；
宽度：400px；
填充顶部：20px；
左侧填充：50px；
边界半径：0px 0px 30px 30px；
背景色：rgba（0,0,0,4）；
}
.泡泡{
位置：绝对位置；
最大宽度：200px；
填充：10px；
填充顶部：0px；
边界半径：0px 20px 20px 20px；
背景色：rgba（0,0,0,3）；
}
.泡泡糖2{
位置：绝对位置；
转换：scaleX（-1）；
最大宽度：200px；
填充：10px；
填充顶部：0px；
边界半径：0px 20px 20px 20px；
背景色：rgba（0,0,0,3）；
}
.气泡2跨度{
变换：比例（-1,1）；
显示：内联flex；
}
查特克斯先生{
字体系列：Arial；
颜色：灰色；
字体大小：12px；
线高：1.2；
字母间距：.5px；
}
.对{
右：50px；
}
.翻转{
变换：比例（-1,1）；
}

尤米：谢谢你的甜心 只需将span添加到文本中，然后再次翻转它


正文{
背景色：#6b；
利润率：50像素；
字体系列：Arial；
颜色：暗灰色；
字体大小：14px；
线高：.3；
字母间距：.5px；
}   
.聊天室{
位置：绝对位置；
高度：200px；
宽度：400px；
填充顶部：20px；
左侧填充：50px；
边界半径：0px 0px 30px 30px；
背景色：rgba（0,0,0,4）；
}
.泡泡{
位置：绝对位置；
最大宽度：200px；
填充：10px；
填充顶部：0px；
边界半径：0px 20px 20px 20px；
背景色：rgba（0,0,0,3）；
}
.泡泡糖2{
位置：绝对位置；
转换：scaleX（-1）；
最大宽度：200px；
填充：10px；
填充顶部：0px；
边界半径：0px 20px 20px 20px；
背景色：rgba（0,0,0,3）；
}
.气泡2跨度{
变换：比例（-1,1）；
显示：内联flex；
}
查特克斯先生{
字体系列：Arial；
颜色：灰色；
字体大小：12px；
线高：1.2；
字母间距：.5px；
}
.对{
右：50px；
}
.翻转{
变换：比例（-1,1）；
}

尤米：谢谢你的甜心！取而代之的是，为什么不为另一方定位所有东西（我自由地调整了其他东西）取而代之的是，为什么不为另一方定位所有东西（我自由地调整了其他东西）thx shahryar，看起来很棒。。。但是，有没有可能去掉下面的线，这是因为剪辑图像靠近边缘？这条线主要显示在firefox上，为了防止这个错误，最好使用css代码来实现泡泡聊天效果，参见示例thx shahryar，看起来很棒。。。但是，有没有可能将剪辑图像中靠近边缘的那条线去掉呢？这条线主要显示在firefox上，为了防止这个错误，最好使用css代码来实现泡泡聊天效果，参见示例