css 将div旋转之后，怎么可以让文字保存水平显示？

Question

问题遇到的现象和发生背景

css样式
  .mcircle {
            width: 10px;
            height: 10px;
            background: dodgerblue;
            border-radius: 0px 18px 20px 18px;
            transform: rotate(-135deg);
        }
 
html代码
<div style="top:200px ;left:200px ;position:fixed;z-index:200;" title="LM1" class="mcircle" >LM1</div>

由于css里面旋转了角度， 但我想把文字方向变回原本水平方向的，请问各路大深有办法吗？
（现在的文字跟着旋转偏斜，我想让文字还是保持水平的）

Answer 1

文字放一个容器里面，这个额容器反转父容器指定的角度

<style>
    .mcircle {
        width: 10px;
        height: 10px;
        background: dodgerblue;
        border-radius: 0px 18px 20px 18px;
        transform: rotate(-135deg);
    }
</style>
<div style="top:200px ;left:200px ;position:fixed;z-index:200;" title="LM1" class="mcircle"><div style="transform: rotate(135deg);">LM1</div></div>