After css rotates the div, keep the text displayed horizontally

common writing

 html:
<div class="mcircle">好晕</div>

css:
<style>
        .mcircle {
            width: 100px;
            height: 100px;
            background: rgb(30, 225, 255);
            border-radius: 0px 18px 20px 18px;
            transform: rotate(-135deg);
            text-align: center;
            line-height: 100px;
            margin: 100px auto;
        }
</style>

 Keep text displayed horizontally

Solution: Put the text in a container, which reverses the angle specified by the parent container

html：
<div class="mcircle"><div style="transform: rotate(135deg)">好晕</div></div>

css不变

Advanced animation

Solution: child element animation reverse animation

html：
 <div class="mcircle">
        <div>好晕</div>
    </div>

css:
.mcircle {
            width: 100px;
            height: 100px;
            background: rgb(30, 225, 255);
            border-radius: 0px 18px 20px 18px;
            text-align: center;
            line-height: 100px;
            margin: 100px auto;
            animation: rotate 3s linear infinite;
        }

        .mcircle div {
            animation: rotate 3s linear infinite;
            animation-direction: reverse;
        }

        @keyframes rotate {
            0% {
                transform: rotateZ(0);
            }

            100% {
                transform: rotateZ(360deg);
            }
        }