よくある書き込み
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>
テキストを水平方向に表示したままにする
解決策: テキストをコンテナに配置すると、親コンテナで指定された角度が反転します。
html:
<div class="mcircle"><div style="transform: rotate(135deg)">好晕</div></div>
css不变
高度なアニメーション
解決策: 子要素のアニメーションの反転アニメーション
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);
}
}