jquery text Rotation

У меня есть простой текст внутри div, вроде следующего:


Я хочу, чтобы текст внутри div был повернут на 20- 30 градусов. Я уже нашел эту тему в stackoverflow об этом, и она дает мне желаемый результат в Firefox и Chrome, но не в IE7, IE8 и IE9. Я также пробовал jquery rotate , но при его использовании похоже, что плагин что-то делает с самим div, заставляя его исчезнуть, вместо того, чтобы вращать текст внутри div. Возможно ли это даже с javscript и / или css?

ПРИМЕЧАНИЕ: Cufon также используется.

Обновление после ответа Кодлера:

Это текущий примененный css после ответа Кодлера. Работает в FF и Chrome.

-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
/*-moz-rotation-point: 0 0;*/
-webkit-transform: rotate(-20deg);
/*-webkit-rotation-point: 0 0;*/
-o-transform: rotate(-20deg);
/*-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;*/

ОБНОВЛЕНИЕ 2: IE7 и IE8 сейчас вращают текст, но в IE9 я получаю большой черный квадрат за моим повернутым текстом. Что может быть причиной этого? CSS теперь выглядит следующим образом:

-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);  
transform: rotate(-20deg);
background-color:transparent;

/*-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')";*/
/*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');*/
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');
zoom: 1;
z-index:1;

position:absolute;

padding     : 45px 10px 15px 10px;

Последний рабочий фрагмент кода. Авторы этого права принадлежат Джеффу и Кодлеру.

HTML:


CSS по умолчанию:

#banner > div
{       
    -moz-transform: rotate(-20deg);                 /*FF*/
    -o-transform: rotate(-20deg);                   /*Opera*/
    -webkit-transform: rotate(-20deg);              /*Safari, Chrome*/
    -ms-transform: rotate(-20deg) !important;       /*IE9*/
        transform: rotate(-20deg);                      /*CSS3 default*/
    background-color:transparent;

    zoom: 1;
    z-index:1; /*NEEDED FOR IE8*/

    width: 191px;

    position:absolute;

    padding     : 45px 10px 15px 10px;
}

CSS ДЛЯ IE 7 и 8 - загружается условно:

#banner
{
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand') !important;
    padding-top:0px;
}

13
задан Community 23 May 2017 в 11:54
поделиться