How to rotate text Rotate centered by number
I have text like September, this should be rotated how I want,
Now my problem is that the text needs to be centered relative to the number .
If I change the text on the can , that should also want to be centered with that number
.
I have a screen as I want as output
Here is my violin that I have tried so far. JSFIDDLE
Here is my code
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;
}
Any help is appreciated.
+3
source to share
4 answers
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>
Same example using some sass to make sizing easier: Plunkr
+1
source to share
*{
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>
+3
source to share
Another change using vertical alignment.
<div class="width35 mgl5">
<div>
<span class="month">september</span>
<span class="day">03</span>
</div>
In all cases, use is required <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;
}
See jsFiddle
+1
source to share
Try
$(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>
+1
source to share