Tengo un texto simple dentro de un div, algo como lo siguiente;

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

Quiero que el texto dentro del div se gire 20-30 grados. Ya he encontradoest topic en stackoverflow al respecto y me da el resultado deseado en Firefox y Chrome pero no en IE7, IE8 e IE9. También probéjquery rotate, pero cuando se usa esto, parece que el complemento está haciendo algo con el div en sí mismo, haciendo que desaparezca, en lugar de girar el texto dentro del div. ¿Es esto posible con javscript y / o css?

NOTA: Cufon también se está utilizando.

Update después de la respuesta de Codlers:

Este es el CSS aplicado actual después de la respuesta de Codler. Funciona en FF y 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: IE7 e IE8 están rotando el texto ahora, pero en IE9 obtengo un gran cuadrado negro detrás de mi texto girado. ¿Qué puede estar causando esto? CSS es ahora como a continuación;

-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;

La pieza final de código de trabajo. Los créditos para esto van a los pies Jeff y Codler.

HTML:

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

CSS predeterminado:

#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 y 8 - Cargado 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;
}