jquery rotação de texto
Eu tenho um texto simples dentro de uma div, algo como o seguint
<div id="banner">
<div>This is an example text</div>
</div>
Eu quero que o texto dentro da div seja girado 20-30 graus. Eu já encontreiist tópico no stackoverflow sobre isso e me fornece o resultado desejado no Firefox e Chrome, mas não no IE7, IE8 e IE9. Eu também tenteijquery rotate, mas ao usar isso, parece que o plug-in está fazendo algo com a própria div, fazendo-a desaparecer, em vez de girar o texto dentro da div. Isso é possível com javscript e / ou css?
OTA: Cufon também está sendo usad
Atualize após a resposta dos codificadores:
Este é o css aplicado atualmente após a resposta do Codler. Funciona em FF e 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;*/
UPDATE 2: O IE7 e o IE8 estão girando o texto agora, mas no IE9 estou recebendo um grande quadrado preto atrás do meu texto rotacionado. O que pode estar causando isso? CSS agora é como abaixo;
-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;
O trabalho final do código. Créditos para isso vão para Jeff e Codle
HTML:
<div id="banner">
<div>This is an example text</div>
</div>
Default 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 PARA IE 7 e 8 - Carregado condicionalmente:
#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;
}