Spans do not rotate when using mPDF - mpdf

Question

$css = '
<style>
* {
margin: 0;
padding: 0;
}
div.titulos {
height: 200px;
background-color: #CCC;
}
div.registros {
height: 30px;
border-top: none;
}
div.titulos,
div.registros {
width: 870px;
margin: 0 auto;
border: thin solid #000;
}
div.titulos div,
div.registros div {
float: left;
text-align: center;
vertical-align: middle;
border-left: thin solid #000;
}
div.titulos div:nth-child(1),
div.registros div:nth-child(1) {
border-left: none;
}
span {}
span.normal {}
span.rotate {
height: 200px;
rotate : -90;
text-rotate : -90;
writing-mode: vertical-rl;
transform: rotate(180deg);
transform-origin: center;
}
</style>
';
$body = '
<div class="titulos">
<div style="width: 100px;"><span class=normal>Nome do Gcéu</span></div>
<div style="width: 100px;"><span class=rotate>Supervisor</span></div>
<div style="width: 100px;"><span class=normal>Líder</span></div>
<div style="width: 050px;"><span class=rotate>Houve Supervisão?</span></div>
<div style="width: 050px;"><span class=rotate>Houve dia de Jejum?</span></div>
<div style="width: 050px;"><span class=rotate>Houve dia de Evangelismo?</span></div>
<div style="width: 050px;"><span class=rotate>Membros Compromissados</span></div>
<div style="width: 050px;"><span class=rotate>Visitantes</span></div>
<div style="width: 050px;"><span class=rotate>Crianças de 0 a 12 anos</span></div>
<div style="width: 050px;"><span class=rotate>Total de presentes</span></div>
<div style="width: 050px;"><span class=rotate>Ofertas</span></div>
<div style="width: 050px;"><span class=rotate>Discipulados</span></div>
<div style="width: 050px;"><span class=rotate>Número de decisões</span></div>
</div>
<div class="registros">
<div style="width: 100px;">Gceú</div>
<div style="width: 100px;">Carlos</div>
<div style="width: 100px;">Cleo</div>
<div style="width: 050px;">Sim</div>
<div style="width: 050px;">Sim</div>
<div style="width: 050px;">Não</div>
<div style="width: 050px;">12</div>
<div style="width: 050px;">3</div>
<div style="width: 050px;">3</div>
<div style="width: 050px;">18</div>
<div style="width: 050px;">12.3</div>
<div style="width: 050px;">2</div>
<div style="width: 050px;">1</div>
</div>
';
//echo $css.$body;
require 'vendor/autoload.php';
$mpdf = new \Mpdf\Mpdf();
$mpdf->SetDisplayMode( 'fullpage' );
$mpdf->WriteHTML( $css, 1 );
$mpdf->WriteHTML( $body );
$mpdf->Output();
The code does not output correctly when output to PDF.
Here is an example screenshot of the PDF output:
Note that the span's class=rotate, but is not rotating. What can I change to fix this?
I need it works because it will be pressed when shown in the browser.
I've tried it with rotate : -90;, text-rotate : -90;, writing-mode: vertical-rl;, transform: rotate(180deg);, but none of these work. Why is that?

Answer 1

Property text-rotate is only supported for tr, th and th elements in mPDF.
transform: rotate is only supported on img element.
Also see supported CSS documentation.