Создание списка под углом 45 градусов и выравнивание по низу либо с помощью css, либо jquery

Question

Я пытаюсь создать список текста с текстом под углом -45 градусов, который также необходимо выровнять по дну и аккуратно отстоять (так что я могу хорошо контролируйте расстояние).

Как в верхней части this page

HTML элементов:

<div class="route-diagram"> 
     <ul class="routes"> 
      <li class="first">Pennywell, Quarry View</li> 
      <li>Pallion, Forfield Road</li> 
      <li>Royal Hospital, Hylton Road</li> 
      <li>Millfield Metro</li> 
      <li>Sunderland, Green Terrace</li> 
      <li>Lorem Ipsum</li> 
      <li>Lorem Ipsum</li> 
     </ul> 
    </div> 

CSS:

.route-diagram ul.routes { 
list-style:none; 
} 

.route-diagram ul.routes li { 
display:inline; 
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
-ms-transform: rotate(-45deg); 
-o-transform: rotate(-45deg); 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
/* 
-webkit-transform-origin: 0 100%; 
    -moz-transform-origin: 0 100%; 
    -o-transform-origin: 0 100%; 
    transform-origin: 0 100%; 
*/ 
zoom:1; 
} 

Я начал jsfiddle here.

Мой вопрос в том, будет ли это легче управлять в отдельных divs (кажется s список намного чище и проще в обслуживании). Или, может быть, в jquery-плагине мне будет больше вариантов?

Я беспокоюсь о том, чтобы расположить список хорошо, кажется, что это очень неудобно в моем html и как показано на скрипке.

Если кто-то может помочь с этим или имеет хороший совет, я был бы очень признателен.

Answer 1

я в конечном итоге, используя удобную функцию JQuery для постепенного добавления левого поля:

var $addMargin = 0; 
var $listItems = $('ul.routes li'); 
    $listItems.each(function(){ 
     $addMargin += 25; 
     $(this).css('margin-left', $addMargin + 'px'); 
    }); 

Answer 2

Вместо вращения каждого элемента, я повернул весь список, который требует добавления немного избыточного синтаксиса CSS, как:

.elemX { margin-left: Ypx; } 

Тем не менее требует полировки, но это, кажется, работает, как вы хотели: http://jsfiddle.net/GHWcZ/