css选择父容器后文字如何保持原样

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

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

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

<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>

如果只是想让文字保持水平方向，而不跟着旋转偏斜，可以使用 transform: rotate(135deg); 来将文字旋转回来。由于元素本身已经旋转了 -135 度，因此要将文字旋转回来，需要再旋转 135 度。

<div style="top:200px ;left:200px ;position:fixed;z-index:200;transform: rotate(135deg);" title="LM1" class="mcircle" >
  <span style="transform: rotate(-135deg);">LM1</span>
</div>

将小图标改成before 代码：

.mcircle::before{
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            background: dodgerblue;
            border-radius: 0px 18px 20px 18px;
            transform: rotate(-135deg);
        }

<div style="top:200px ;left:200px ;position:fixed;z-index:200;" title="LM1" class="mcircle" >LM1</div>

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7520688
• 这篇博客你也可以参考下：css文字与图片水平对齐
• 除此之外, 这篇博客: CSS如何实现水平垂直居中？4种工作中非常常用的方法中的 *CSS如何实现水平垂直居中？ 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• **
  1.用定位中的 “子绝父相” 来做 [核心代码是给子盒子添加的margin-top、margin-left 分别等于自身的高度、宽度的负的 一半]
  PS：缺点：需要提前知道元素的尺寸。如果不知道元素尺寸，这个时候就需要JS获取了。
  
  2. 用定位中的 margin: auto 来做 当然也是要在绝对定位下
  
  3.绝对定位————位偏移
  

  4.CSS3.0弹性布局
  弹性布局① 给body(父盒子)加弹性元素display: flex;
  align-items: center; /定义body的元素垂直居中（/主轴居中-主轴默认是x轴）
  /justify-content: center; /定义body的元素水平居中//侧轴居中-主轴默认是y轴）

  

  注意一定是给父盒子加 弹性元素display: flex 导致的是子盒子的垂直居中：
  

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632