Direção do texto de uma coluna - dataTable [RESOLVIDO]

<h:head>

	<style type="text/css">
.ui-layout-north {
	z-index: 20 !important;
	overflow: visible !important;;
}

.ui-layout-north .ui-layout-unit-content {
	overflow: visible !important;
}

.ui-widget {
	font-size: 10px !important;
}

.verticaltext {
	writing-mode: tb-rl;
	filter: flipv fliph;
}

.size {
	width: 800px;
	position: relative;
	left: 22%;
	top: 10%;
}

.centro {
	top: 50%
}

.tabela {
	width: 750px;
}
</style>

<p:columns var="b"
							value="#{preenchimentoBacking.listaDisciplinas}">
							<div align="center">
								<f:facet name="header">
                                                  
                                                           //Esse texto no div que eu gostaria de exibir na vertical e ainda esta sendo exibido na horizontal.
								<div class="verticaltext">
									#{b.turma.disciplina.idOrion} - #{b.turma.disciplina.nome} - #{b.turma.docente.nome} 
								</div>
								</f:facet>
								<p:inputText size="5" />
							</div>
						</p:columns>

<h:head>
        <title>Rotacionar Texto</title>
        <style type="text/css">
            .ui-widget {
                font-size: 10px !important;
            }

            .verticaltext {
                /*General*/
                transform: rotate(-90deg)!important;
                /*Firefox*/
                -moz-transform: rotate(-90deg)!important;
                /*Microsoft Internet Explorer*/
                writing-mode: tb-rl !important;
                filter: flipv fliph !important;
                /*Chrome, Safari*/
                -webkit-transform: rotate(-90deg)!important;
                /*Opera*/
                -o-transform: rotate(-90deg)!important;
                /*alter opacity*/
                opacity:0.8!important;
                filter:alpha(opacity=80)!important;              
            }
            .centro {
                top: 50%
            }
        </style>        
    </h:head>