CSS вращать текст - сложный

Question

Это просто проблема CSS, но ее можно сохранить с помощью jQuery или очень умных техник CSS.Посмотрите, что вы думаете.Я создал JSFiddle, чтобы вы могли поэкспериментировать.http://jsfiddle.net/WMVMW/157/

См. Проблему ниже.

Это должно работать только в браузерах Android и Safari - так что не беспокойтесь о IE!

Когда я начал этот проект,Первоначально я планировал использовать CSS3 для поворота некоторого html-текста - на самом деле не до конца понимая значение свойства transform.

Идея того, что я делаю, - это интерактивный план этажа.У меня много DIVS с абсолютным позиционированием, которые представляют стенды / стенды.Поскольку некоторые из моих DIVS действительно тонкие, но высокие, моя идея состояла в том, чтобы повернуть текст внутри DIV на -90 градусов.

Вот так выглядит каждый DIV - на самом деле это не DIV, а теги A сПоведение в стиле DIV.

<a href="" title="" id="200" class="cell"><span>Harley Davidson</span></a>

Интервал внутри тега A имеет поведение display: table cell;, поэтому текст можно выровнять по вертикали внутри поля.

Идентификационный номер наТег только позиционирует стили, стиль класса .cell контролирует все другие варианты поведения.

Моя задача - ввести новый класс с именем .rotate, который вращает текст на -90 градусов.Но внешний вид остается таким же - и текст течет, а не наследует ширину и высоту от содержащего тега A.Ниже показано, как добавлен класс поворота ...

<a href="" title="" id="200" class="cell rotate"><span>Harley Davidson</span></a>

Смотрите здесь JSfiddle ... со всеми стилями CSS и

http://jsfiddle.net/WMVMW/157/

Anyпомощь будет потрясающей.Надеюсь, это достаточно понятно.

Answer 1

Хитрость заключается в повороте всего a, а не только span.Живой пример: http://jsfiddle.net/WMVMW/164/

a.rotate{
    -moz-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);   
}

#R135, #R135-1 {
    left: -35px;
    top: 85px;
    width:157px;
    height: 42px;    
}

Итак, я поменял width и height (как это будет вращаться), а затем переместил его.

Answer 2

Вы можете добавить дополнительные <span> внутри других: http://jsfiddle.net/WMVMW/160/