<html>
<head>
<title>Impressão de Carnê</title>
<style>
.vertical {
transform: rotate(270deg);
margin-top: 165px;
display: inline-block;
border: 1px solid black;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<form method="POST">
<div class='vertical'>
<table border='1' borderColorLight='#000000' cellpadding='2' cellspacing='0'>
<tr>
<td colspan="2">
<p align="left">
<font face="Verdana" size="2">Loja:</font>
</td>
</tr>
<tr>
<td colspan="2">
<p align="left">
<font face="Verdana" size="2">Cliente:</font>
</td>
</tr>
<tr>
<td>
<p align="left">
<font face="Verdana" size="2">Contrato/OS:<br/>Vencimento:</font>
</td>
<td>
<p align="left">
<font face="Verdana" size="2">Parcela:<br/>Valor:</font>
</td>
</tr>
<tr>
<td colspan="2">
<p align="left">
<font face="Verdana" size="2">Recebido Por:_____________________________<br/><br/>Data:________________ Hora:______________</font>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Adicione um comentário
|
1 Resposta
Use transform-origin
para controlar o ponto de rotação da tabela em um dos vértices como eu fiz abaixo, no caso eu usei transform-origin: top left;
.
O transform-origen
default é center
, por isso vc precisou usar o margin-top
, mas agora é desnecessário e deixei ele comentado
.vertical {
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
/* margin-top: 165px; */
display: inline-block;
border: 1px solid black;
}
<form method="POST">
<div class='vertical'>
<table border='1' borderColorLight='#000000' cellpadding='2' cellspacing='0'>
<tr>
<td colspan="2">
<p align="left">
<font face="Verdana" size="2">Loja:</font>
</td>
</tr>
<tr>
<td colspan="2">
<p align="left">
<font face="Verdana" size="2">Cliente:</font>
</td>
</tr>
<tr>
<td>
<p align="left">
<font face="Verdana" size="2">Contrato/OS:<br/>Vencimento:</font>
</td>
<td>
<p align="left">
<font face="Verdana" size="2">Parcela:<br/>Valor:</font>
</td>
</tr>
<tr>
<td colspan="2">
<p align="left">
<font face="Verdana" size="2">Recebido Por:_____________________________<br/><br/>Data:________________ Hora:______________</font>
</td>
</tr>
</table>
</div>
</form>
-
1