работай

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

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

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

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

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

Это текущий применяемый 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:

<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;
}
 Steven.Nguyen02 янв. 2015 г., 15:23
Попробуйте этот урок. Я думаю, что это будет полезно ... :)stackoverflow.com/questions/6184589/jquery-text-rotation

Ответы на вопрос(5)

Можно вращать с 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/

 Rob31 мая 2011 г., 10:04
Разве это не то же самое, что в одной из тем, которые я уже упоминал в своих вопросах?
 Rob31 мая 2011 г., 10:10
@ Кодлер, спасибо. Попробую это.
 Rob31 мая 2011 г., 10:43
Обновил мой вопрос, почти работает!
 JohnP31 мая 2011 г., 10:05
@ Роб да, это так.
 Codler31 мая 2011 г., 10:08
Используйте -ms-transform для IE9 и «матрицу фильтра» для IE6-IE8, вы можете найти больше здесьcss3please.com

олько на кратные 90 градусов, и даже это неприятно (IIRC). Тем не мение,этот ответ утверждает, что иначе.

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

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

Решение Вопроса

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

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

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

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

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

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

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

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

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

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

 Rob31 мая 2011 г., 10:43
Обновил мой вопрос, почти работает!
 Rob31 мая 2011 г., 10:57
@Джефф, пробовал без z-index. Но тогда ротация больше не работает в IE8. Было бы здорово, если бы вы могли помочь завтра!
 Jeff31 мая 2011 г., 11:06
@Rob Кроме того, если вы можете заставить его работать в IE9 и IE8 с -different- стилями, вы всегда можете использовать целевой взлом IE css, например, <! - [if lte IE 9]> ... Я использую это на своей странице было хорошо, если вы просматриваете исходный код HTML. Не знаю, полезно ли это ...
 Rob31 мая 2011 г., 11:09
@ Джефф, если я уберу матрицу фильтра IE, она будет работать в ie9. Так что попробую с условными стилями, хороший совет!
 Jeff31 мая 2011 г., 10:50
Хм, я сейчас на Mac, поэтому не могу устранить неполадки в данный момент. Моя единственная мысль: вам нужен z-index: 1? Вы можете попытаться избавиться от этого или даже сделать -1. В противном случае я проверю завтра, если это все еще не решено.

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

 Nicolas Borda30 мая 2012 г., 10:14
Это действительно помогло мне, спасибо! Добавление фильтров в таблицу стилей lt IE9 решило мою проблему.

который будет работать в разных браузерах:

http://www.useragentman.com/IETransformsTranslator/index.html

Этодействительно делаетработай.

Ваш ответ на вопрос