Показать список html в кривой

Question

Как отображать список в кривой вместо строки строки, с html и css?

Для легко ответить на этот вопрос, у меня есть codepen подготовлены уже

CodePen Link

Большое спасибо.

Answer 1

Использование

transform: rotate(-30deg); 

на первый элемент списка. Используйте впоследствии более высокие степени, заканчивая

transform: rotate(30deg); 

Вы можете автоматизировать это с помощью функции Javascript/JQuery легко, если вам необходимо динамическое решение, которое работает для любого количества элементов:

$(document).ready(function() { 
    var numberOfItems = $('#movies ul li').length; 
    var startAngle=-30; 
    var maxOffset = 60; 
    if (numberOfItems > 1) { 
    var step = 60/(numberOfItems-1); 
    $('#movies ul').css('margin-top', maxOffset+'px') 
    $('#movies ul li').each(function(index) { 
     var deg = startAngle + index * step; 
     var offset = -1 * (maxOffset - 2 * Math.abs(deg)); 
     $(this).css({ 
     'top': offset+'px', 
     'transform': 'rotate('+deg+'deg)' 
     }); 
    }); 
    } 
}); 

http://codepen.io/anon/pen/YXGBdg

Редактировать: теперь включает смещение переменной в зависимости от позиции в списке, чтобы сделать для «соблазнительно».