回転したテキストをキャンバスの左に揃える

Question

回転したY軸のタイトル（SPEED（MPH））をグラフに追加しようとしています。それは、画像の中で指摘されているように、左にあるものが私が望むところに単純に合わない。ポジションとマージンを混乱させようとしました。チャートキャンバスをラベルの下に移動するか、チャートキャンバスが青いボックスの外に移動します。また、この例ではブートストラップグリッドシステムを使用しています。アドバイスをお願いします。ありがとう。

<! -- 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/