Подтвердить что ты не робот

Вращение текста jQuery

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

<div id="banner">
    <div>This is an example text</div>
</div>

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

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

Обновление после ответа Codlers:

Это текущий прикладной css после ответа Codler. Работает в 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:

<div id="banner">
    <div>This is an example text</div>
</div>

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;
}
4b9b3361

ОТВЕТЫ

Ответ 1

В стандартизованных браузерах вы можете использовать свойство CSS3 transform, хотя, вероятно, неплохо использовать префиксы поставщика, например:

-o-transform: rotate(5deg);
-khtml-transform: rotate(5deg);
-webkit-transform: rotate(5deg); 
-moz-transform: rotate(5deg);

В Internet Explorer 6 и 7 все становится сложным. Вы можете использовать свойство IE filter для вращения.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

будет вращать элемент на 90 градусов. Вы также можете поворачивать 180 или 270 градусов, используя rotation=2 или rotation=3

Вы хотите повернуть что-то в IE под другим углом? Готовы ли вы к головной боли?

Вы можете снова использовать свойство IE filter и указать координаты матрицы и получить что-то действительно уродливое:

progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=0.08715574, M21=-0.08715574, M22=0.99619470,sizingMethod='auto expand');

Есть инструкции по использованию координат матрицы на этой странице, но, откровенно говоря, ни один из них не имеет никакого смысла. Лучшее решение - использовать этот удобный Матричный калькулятор, который будет генерировать CSS, который вам нужен, когда вы укажете угол в градусах.

Вы можете проверить CSS на на моем сайте, чтобы увидеть пример, но я не проверял его с помощью IE через некоторое время, поэтому Я не могу сделать promises...

Ответ 2

Можно повернуть с помощью css3

transform: rotate(20deg);

Помните, что для некоторых браузеров требуется префикс поставщика.

.box_rotate {
     -moz-transform: rotate(20deg);  /* FF3.5+ 
       -o-transform: rotate(20deg);  /* Opera 10.5 
  -webkit-transform: rotate(20deg);  /* Saf3.1+, Chrome 
      -ms-transform: rotate(20deg);  /* IE9 
          transform: rotate(20deg);  
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9  
                     M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand');
               zoom: 1;
}

Источник http://css3please.com/

Ответ 3

Кажется, что черный квадрат в фоновом режиме в IE9 происходит, когда эти неприятные проприетарные фильтры также находятся в селекторе, где вы выполняете преобразования css.

Ответ 4

Это не реально в IE. В лучшем случае IE может вращаться только на 90 градусов, и даже на то, что боль (IIRC). Однако этот ответ утверждает иначе.

Для современных браузеров используйте transform, -webkit-transform и -moz-transform, как уже было предложено.

Возможно, вы сможете использовать его с помощью VML (Vector Markup Language) в IE. Я думаю, что он может делать произвольные вращения.