將旋轉後的文本對齊到畫布左側

Question

我想向我的圖表添加旋轉的Y軸標題（SPEED（MPH））。它簡單不符合我想要的位置，這就是圖像中指出的最左邊的位置。曾試圖混亂立場和利潤。我最終將標籤下方的圖表畫布轉移，或者圖表畫布移出藍色框。在這種情況下也使用Bootstrap網格系統。任何建議請。謝謝。

<! -- html --> 
<div class="col-sm-4"> 
      <div class="k-livestat_box"> 
       <h3>Speed Status</h3> 
       <hr> 
       <div class="radar-chart-sz"> 
        <!--Line Speed Chart --> 
        <label class="ylabel">Speed (mph)</label> 
        <canvas id="lineChart"></canvas> 
       </div> 
       <h4 id="currentspeed">Current Speed (mph): 100</h4> 
       <h4 id="topspeed">Highest Speed (mph): 100</h4> 
       <h4 id="lowspeed">Lowest Speed (mph): 100</h4> 
       <h4 id="avgspeed">Average Speed (mph): 100</h4> 
      </div> 
     </div> 

..

/*CSS*/ 

.ylabel { 
    float: left; 
    position: absolute; 
    margin-top: 60px; 
    text-align: center; 
    /* Rotate div */ 
    -ms-transform: rotate(270deg); /* IE 9 */ 
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */ 
    transform: rotate(270deg); 
}​ 

.radar-chart-sz{ 
    padding-left: 0 !important; 
    margin-top: 20px; 
} 

.k-livestat_box { 
    margin: 15px 2.5px; 
    padding: 25px; 
    min-height: 458px; 
    max-width: 100%; 
    background-color: #1A284B; 
    color: #C3CF01; 
    border: 1px solid #162444; 
} 

Answer 1

只需添加在變換原點，然後一個翻譯調節

... 
    transform-origin: 0% 50%; 
    transform: rotate(270deg) translate(-25%, -50%); 
} 

---

小提琴 - http://jsfiddle.net/kyt3Lmyc/