Кросбраузерно повернуть надпись

[okunev2]

Есть картинка

 

 

Как вообще возможно так повернуть кросбраузерно надпись?

[Galaxy]

смотря какая кроссбраузерность нужна , а вообще transform rotate

[npofopr]

А что вы понимаете под словом кроссбраузерно?

Поворачивать то всяко можно http://developerdrive.com/demo/demo/CSS_Rotate/css3_rotate.html

[Great Rash]

1) Идём в Википедию и читаем про матрицу поворота.
2) Ищем в интернетах формулу для перевода градусов в радианы.
3) Например при помощи JS в консоли считаем какой будет синус и косинус нужного угла:
 

Math.sin(-45 * Math.PI / 180); // -0.7071067811865475Math.cos(-45 * Math.PI / 180); // 0.7071067811865476

 
4) Наша матрица поворота будет выглядеть так:
 

|cos, -sin|   | 0.7071067811865476,  0.7071067811865475 ||         | = |                                         ||sin,  cos|   | -0.7071067811865475, 0.7071067811865476 |

 
5) Сочиняем CSS:
 

.rotate-45 {  -webkit-transform: matrix(0.7071067811865476, -0.7071067811865475, 0.7071067811865475, 0.7071067811865476, 0, 0);  -moz-transform: matrix(0.7071067811865476, -0.7071067811865475, 0.7071067811865475, 0.7071067811865476, 0, 0);  -ms-transform: matrix(0.7071067811865476, -0.7071067811865475, 0.7071067811865475, 0.7071067811865476, 0, 0);  -o-transform: matrix(0.7071067811865476, -0.7071067811865475, 0.7071067811865475, 0.7071067811865476, 0, 0);  transform: matrix(0.7071067811865476, -0.7071067811865475, 0.7071067811865475, 0.7071067811865476, 0, 0);  /* для старых ИЕ */  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476,sizingMethod='auto expand')";  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476,sizingMethod='auto expand');}

6) Проверяем расчёты

[psywalker]

Или можно проще, тупо нагуглить генераторы матриц, которые преобразуют значения CSS3-transform для IE

 

[SelenIT]

Имхо, на практике достаточно

.rotate-45 {  /* для ios7 safari/android browser */  -webkit-transform: rotate(-45deg);  /* для IE9 */  -ms-transform: rotate(-45deg);  /* для всех остальных, включая Оперу 12.1 */  transform: rotate(-45deg);}.ie_lt9 .rotate-45 {  /* для реально ископаемых ИЕ... оно точно того стоит?  */  /* если да, то надо спрятать от IE9, т.к. он понимает и фильтры, и -ms-transform */  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476,sizingMethod='auto expand');}

[Николя223]

jquery.transform

ещё есть такой плагин.... только - это у одного у меня так? когда я на джит пытаюсь зайти?