CSS3 преобразует элемент, но не его потомки

Question

У меня есть горизонтальное меню, и я хочу повернуть на 90 ° влево или вправо некоторые из его вкладок.Проблема в том, что свойство transform также вращает потомков.Кажется, трудно вернуть их на место, есть ли решение?

PS Я хочу избегать использования изображений или JS, они в порядке откатов.

Answer 1

Вы можете применить обратное вращение к потомкам.

Например

div.parent{
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
}


div.parent span{
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);  
}

Пример: http://jsfiddle.net/RpcfB/1/

Кстати, вам нужно поиграть с padding и / или margin, чтобы все это заработало.

EDIT

Боюсь, все сложнее.

Это правда !! Хотя, как я уже говорил, вы должны играть с CSS.

Например, чтобы исправить первое, вам необходимо выполнить следующие настройки:

1. добавить класс к первому li

    #nav_main_gts > li.rotate{ //ADD CLASS HERE
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-1);
        transform: rotate(-90deg);
    }
   

2. Затем измените второе правило, чтобы указать следующее ul, а не li

3. Затем возьмите margin, чтобы все это на месте. Помните, потому что первый li повернут, вниз не осталось, поэтому нужен отрицательный margin-left

    #nav_main_gts > li.rotate ul{ //CHANGE TO UL HERE
       -moz-transform: rotate(90deg);
       -webkit-transform: rotate(90deg);
       -o-transform: rotate(90deg);
       -ms-transform: rotate(90deg);
       filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
       transform: rotate(90deg);
       margin-left:-100px;  //ADD A MARGIN HERE
    }
   

4. продолжить с другими.

Обновленный пример: http://jsfiddle.net/FKCTk/1/