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

如何解决如何将div文字翻转回正常状态？

我试图将聊天气泡中的文本恢复正常。注意：我使用以下变换翻转div：scaleX（-1）;这样才能使其在右侧看起来正确。但是后效应也会使我的文字翻转！我整日忙于工作，没有人有解决此问题的简单解决方案。或者，如果可能的话，您知道如何翻转div chat clip.png而不是保留东西吗？

Thy yummi

String url = "https://www.Tradingview.com/symbols/BTCUSDT/?exchange=BINANCE";
try (final WebClient webClient = new WebClient(browserVersion.FIREFOX)) {
    webClient.getoptions().setThrowExceptionOnScriptError(false);

    HtmlPage page = webClient.getPage(url);
    webClient.waitForBackgroundJavaScript(20_000);

    System.out.println(" ---- ");
    System.out.println(page.asText());
    System.out.println(" ---- ");
}

body {
    background-color: #6B6B6B;
    margin: 50px;   
    font-family: Arial;
    color: darkgrey;
    font-size: 14px;
    line-height: .3;
    letter-spacing: .5px;
}   
    .chatBox {
    position: absolute;
    height: 200px;
    width: 400px;
    padding-top: 20px;
    padding-left: 50px;
    border-radius: 0px 0px 30px 30px;
    background-color:rgba(0,.4);
}
    .bubble {
    position: absolute;
    max-width:200px;
    padding: 10px;
    padding-top: 0px;
    border-radius: 0px 20px 20px 20px;
    background-color:rgba(0,.3);
}
    .bubble2 {
    position: absolute;
    transform: scaleX(-1);
    max-width:200px;
    padding: 10px;
    padding-top: 0px;
    border-radius: 0px 20px 20px 20px;
    background-color:rgba(0,.3);
}
    .chattext {
    font-family: Arial;
    color: grey;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .5px;
}
    .right {
    right:50px;
}
    .flip {
    transform: scale(-1,1);
}

解决方法

只需将跨度添加到文本并再次翻转

body {
    background-color: #6B6B6B;
    margin: 50px;   
    font-family: Arial;
    color: darkgrey;
    font-size: 14px;
    line-height: .3;
    letter-spacing: .5px;
}   
    .chatbox {
    position: absolute;
    height: 200px;
    width: 400px;
    padding-top: 20px;
    padding-left: 50px;
    border-radius: 0px 0px 30px 30px;
    background-color:rgba(0,.4);
}
    .bubble {
    position: absolute;
    max-width:200px;
    padding: 10px;
    padding-top: 0px;
    border-radius: 0px 20px 20px 20px;
    background-color:rgba(0,.3);
}
    .bubble2 {
    position: absolute;
    transform: scaleX(-1);
    max-width:200px;
    padding: 10px;
    padding-top: 0px;
    border-radius: 0px 20px 20px 20px;
    background-color:rgba(0,.3);
}
.bubble2 span{
    transform: scale(-1,1);
    display: inline-flex;
}
    .chattext {
    font-family: Arial;
    color: grey;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .5px;
}
    .right {
    right:50px;
}
    .flip {
    transform: scale(-1,1);
}

<div class="chatbox">

<div class="bubble2 right chattext">
<div><img src="http://wizzfree.com/pix/bubble1.png" width="13" style="margin-left:-23px;">&nbsp;
<span>Yummi: Thx your sooo sweet! ?</span></div></div>

<div class="bubble chattext" style="margin-top: 50px;">
<div><img src="http://wizzfree.com/pix/bubble1.png" width="13" style="margin-left:-23px;">&nbsp;
You: how are you do you find your cat? you are so lovely today. what u doing?</div></div>