javascript - 如何旋转以中心为中心的文本旋转到数字

Question

我的文本是九月，应该按我的意愿旋转，

现在我的问题是文本应该根据数字居中。

如果我将文本更改为 ma​​y ，也应该以该数字为中心。

我有一个屏幕，我想要如何输出

这是我到目前为止试过的 fiddle 。 JSFIDDLE

这是我的代码

HTML

<div class="width35 fll">
 <div class="mgl5">
 <div class="section month fll ng-binding">september</div></div>
  <div class="section day fs80 mgrt10 mgrt13 mgr30 osb fll ng-binding">03</div>
</div>

CSS

.width35 {
width: 35%;
}
.fll {
float: left;
}
.mgl5 {
margin-left: 5px;
}
.month {
-webkit-transform: rotate(-90deg) translate(-129%, 50%) !important;
    font-weight: bold;
font-family: arial;
font-size: 13px;
height: 85px;
width: 20px;
color: #CDCBCB;
}
.mgrt13 {
margin-top: -13px !important;
}
.osb {
font-family: open sans bold;
}
.mgr30 {
margin-right: 30px;
}
.mgrt13 {
margin-top: -13px !important;
}
.mgrt10 {
margin-top: -10px;
}
.fs80 {
font-size: 80px;
}
.day {
width: 68px;
height: 60px;
margin-right: 10px;
font-size: 60px;
font-weight: bold;
color: #A79C9C;
margin-left: -8px;
}
.section {
padding-bottom: 7px;
}

感谢任何帮助。

Answer 1

  *{
    box-sizing:border-box;
    padding:0;
    margin:0;
}

.example-date{
    color: #A79C9C;
    position:relative;
    border:1px solid #987;
    width:150px;
    height:150px;
    margin:40px auto;
    transform-style: preserve-3d;
    perspective: 960;
}
.example-day,.example-month{
    position:absolute;
}
.example-day{
    font-size: 150px;
    line-height:150px;
    right:-14px;
    top:50%;
    transform: translate3d(0,-50%,0);
}

.example-month{
    text-transform: uppercase;
    left: -50%;
    transform: rotate(-90deg) translate3d( -45%, 10px,0 );
    width: 100%;
    height: 20px;
    text-align: center;
    top: 0;
}

<div class="example-date">
    <div class="example-day">31</div> 
    <div class="example-month">september</div> 
</div>