title: How do I make my jQuery Flot x-axis rotated labels appear directly beneath the lines they represent?
body: <p>I’ve created a graph with Flot (using JQuery 1.11).  Here is the fiddle — <a href="http://jsfiddle.net/y16h8LmL/3/" rel="nofollow">http://jsfiddle.net/y16h8LmL/3/</a> .  I have this CSS in place for the x-axis labels …</p>
  
  <pre><code>#placeholder div.xAxis div.tickLabel {
    transform: translateY(15px) rotate(45deg);
    -ms-transform: translateY(15px) rotate(45deg);
    /* IE 9 */
    -moz-transform: translateY(15px) rotate(45deg);
    /* Firefox */
    -webkit-transform: translateY(15px) rotate(45deg);
    /* Safari and Chrome */
    -o-transform: translateY(15px) rotate(-90deg);
    /* Opera */
    /*rotation-point:50% 50%;*/
    /* CSS3 */
    /*rotation:270deg;*/
    /* CSS3 */
  }
  </code></pre>
  
  <p>This rotates the x-axis labels, as I like, however, each label does not appear directly beneath the vertical line it is meant to represent.  How do I make the labels start directly under the line?  </p>