如何旋转带有中心点的文本到特定角度？

Question

我有一个文本，是“September”，我想要旋转它，

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

如果我将文本更改为may，那么也应该与该数字居中。

我有一个屏幕，我希望输出如下：

这是我迄今为止尝试的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;
}

任何帮助都是受欢迎的。

- KesaVan

---

我看了一下这个，不禁想提醒你：你不需要使用所有的类。 - David Thomas

@DavidThomas：感谢你宝贵的信息，朋友。 - KesaVan

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>

- Gildas.Tambo

Answer 2

container {
    position: relative;
}

.month {
    -webkit-transform: rotate(-90deg)
        translate(
            calc((150px -  20px) / -2),
            calc((150px -  20px) / -2)
        );
    position: absolute;
    font-weight: bold;
    font-family: arial;
    font-size: 20px;
    line-height: 20px;
    height: 20px;
    width: 150px;
    color: #CDCBCB;
    float: left;
    text-align: center;
}

.day {
    height: 150px;
    line-height: 150px;
    font-size: 150px;
    font-weight: bold;
    color: #A79C9C;
    margin-left: 30px;
    float: left;
}

<div class="container">
    <div class="section month">june</div>
    <div class="section day">03</div>
</div>

使用一些Sass来更轻松地调整大小的相同示例：Plunkr

- naeramarth7

Answer 3

尝试

$(function() {
var months = [{"january":60}, {"february":62}, {"march":58}
              , {"april":53}, {"may":51}, {"june":50}
              , {"july":48}, {"august":59}, {"september":71}
              , {"october":60}, {"november":69}, {"december":69}];

$.each(months, function(k, v) {
    $("<option>", {
        "value" : Object.keys(v)[0],
        "text" : Object.keys(v)[0]
    }).appendTo("select")
});

$("select").on("change", function(e) {
  var now = $(".month");
  now.text($(this).val());
  var m = $.grep(months, function(v) {
    return v[now.text()]
  }); 
  now.css("top", m[0][now.text()] + "px") 
});

})

#date {
  max-height : 60px;
  max-width : 60px;
  display:block;
}
.month {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  font-weight: bold;
  font-family: arial;
  font-size: 13px;
  color: #CDCBCB;
  position : relative;
  width : 0px;
  height : 0px;
  top : 71px;
}

.day {
  font-size: 60px;
  font-weight: bold;
  color: #A79C9C;
  left : 20px;
  display : block;
  position : relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="date"><div class="month">september</div><div class="day">06</div></div>
<br />
<select>
    <option></option>
</select>

jsfiddle http://jsfiddle.net/guest271314/p2par985/3/

的内容与编程有关。

- guest271314

Answer 4

只是另一种使用 vertical-align 的变体。

<div class="width35 mgl5">
<div>
   <span class="month">september</span>
   <span class="day">03</span>
</div>

在所有情况下，都需要使用<span>。

.width35 { width: 35%; }
.fll { float: left; }
.mgl5 { margin-left: 5px; }

.month {
    -webkit-transform: rotate(-90deg) !important;
    font-weight: bold;
    font-family: arial;
    font-size: 13px;
    color: #CDCBCB;
}
.day {

    font-size: 60px;
    font-weight: bold;
    color: #A79C9C;
    margin-left: -20px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: 120px;      
}

查看 jsFiddle

- Erik