将旋转的文本对齐到画布的左侧

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/