How can I fully control a rotation
up vote
2
down vote
favorite
How can I fully control the rotation of a div using CSS?
I've been struggling with this for a while now, but nothing seems to work properly. I'm using this for a document that needs to be as concise as possible and every time that I need to rotate a div inside a table cell, the width of that cell becomes uncontrollable, linked to the length of the word written inside.
Right now I'm using the code below, even though I've been trying to use other methods.
My aim is to reduce the width of the left cell and make it more suited to the font, freeing space.
My CSS:
.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
writing-mode: lr-tb;
}
And my HTML:
<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">C</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>javascript html css html-table center
edited Nov 19 at 16:30
Brian Tompsett - 汤莱恩
4,153133699
asked Nov 19 at 15:01
L.BB
132
add a comment |
up vote
2
down vote
favorite
How can I fully control the rotation of a div using CSS?
I've been struggling with this for a while now, but nothing seems to work properly. I'm using this for a document that needs to be as concise as possible and every time that I need to rotate a div inside a table cell, the width of that cell becomes uncontrollable, linked to the length of the word written inside.
Right now I'm using the code below, even though I've been trying to use other methods.
My aim is to reduce the width of the left cell and make it more suited to the font, freeing space.
My CSS:
.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
writing-mode: lr-tb;
}
And my HTML:
<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">C</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>javascript html css html-table center
edited Nov 19 at 16:30
Brian Tompsett - 汤莱恩
4,153133699
asked Nov 19 at 15:01
L.BB
132
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
How can I fully control the rotation of a div using CSS?
I've been struggling with this for a while now, but nothing seems to work properly. I'm using this for a document that needs to be as concise as possible and every time that I need to rotate a div inside a table cell, the width of that cell becomes uncontrollable, linked to the length of the word written inside.
Right now I'm using the code below, even though I've been trying to use other methods.
My aim is to reduce the width of the left cell and make it more suited to the font, freeing space.
My CSS:
.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
writing-mode: lr-tb;
}
And my HTML:
<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">C</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>javascript html css html-table center
edited Nov 19 at 16:30
Brian Tompsett - 汤莱恩
4,153133699
asked Nov 19 at 15:01
L.BB
132
How can I fully control the rotation of a div using CSS?
I've been struggling with this for a while now, but nothing seems to work properly. I'm using this for a document that needs to be as concise as possible and every time that I need to rotate a div inside a table cell, the width of that cell becomes uncontrollable, linked to the length of the word written inside.
Right now I'm using the code below, even though I've been trying to use other methods.
My aim is to reduce the width of the left cell and make it more suited to the font, freeing space.
My CSS:
.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
writing-mode: lr-tb;
}
And my HTML:
<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">C</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table><table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">C</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table><table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">C</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>javascript html css html-table center
javascript html css html-table center
edited Nov 19 at 16:30
Brian Tompsett - 汤莱恩
4,153133699
asked Nov 19 at 15:01
L.BB
132
edited Nov 19 at 16:30
Brian Tompsett - 汤莱恩
4,153133699
asked Nov 19 at 15:01
L.BB
132
edited Nov 19 at 16:30
Brian Tompsett - 汤莱恩
4,153133699
edited Nov 19 at 16:30
Brian Tompsett - 汤莱恩
4,153133699
edited Nov 19 at 16:30
Brian Tompsett - 汤莱恩
4,153133699
4,153133699
asked Nov 19 at 15:01
L.BB
132
asked Nov 19 at 15:01
L.BB
132
asked Nov 19 at 15:01
L.BB
132
132
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
2
down vote
accepted
What you're seeing there is that the layout engine calculates the width of the element before applying the transformation. One easy way to deal with this is to add a negative horizontal margin:
.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
writing-mode: lr-tb;
margin: 0 -1.5em;
}<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">CLIENTE</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>edited Nov 19 at 15:31
user2154065
8022719
answered Nov 19 at 15:07
nvioli
2,26631228
thank you so much!
– L.BB
Nov 19 at 15:19
Prego, buona fortuna!
– nvioli
Nov 19 at 15:20
add a comment |
up vote
0
down vote
Table data with 1% width having a paragraph which simply we can rotate but when there is more or less character you have to manually adjust margin and padding for the center class.
.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
transform: rotate(270deg);
margin: 0 -1.6em;
}<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">CLIENTE</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>answered Nov 19 at 15:36
Prameshwar Kumar
574
Can you add some explanation to your solution? Which steps are neccessary?
– Nico Haase
Nov 19 at 16:33
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
What you're seeing there is that the layout engine calculates the width of the element before applying the transformation. One easy way to deal with this is to add a negative horizontal margin:
.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
writing-mode: lr-tb;
margin: 0 -1.5em;
}<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">CLIENTE</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>edited Nov 19 at 15:31
user2154065
8022719
answered Nov 19 at 15:07
nvioli
2,26631228
thank you so much!
– L.BB
Nov 19 at 15:19
Prego, buona fortuna!
– nvioli
Nov 19 at 15:20
add a comment |
up vote
2
down vote
accepted
What you're seeing there is that the layout engine calculates the width of the element before applying the transformation. One easy way to deal with this is to add a negative horizontal margin:
.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
writing-mode: lr-tb;
margin: 0 -1.5em;
}<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">CLIENTE</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>edited Nov 19 at 15:31
user2154065
8022719
answered Nov 19 at 15:07
nvioli
2,26631228
thank you so much!
– L.BB
Nov 19 at 15:19
Prego, buona fortuna!
– nvioli
Nov 19 at 15:20
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
What you're seeing there is that the layout engine calculates the width of the element before applying the transformation. One easy way to deal with this is to add a negative horizontal margin:
.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
writing-mode: lr-tb;
margin: 0 -1.5em;
}<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">CLIENTE</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>edited Nov 19 at 15:31
user2154065
8022719
answered Nov 19 at 15:07
nvioli
2,26631228
What you're seeing there is that the layout engine calculates the width of the element before applying the transformation. One easy way to deal with this is to add a negative horizontal margin:
.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
writing-mode: lr-tb;
margin: 0 -1.5em;
}<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">CLIENTE</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
writing-mode: lr-tb;
margin: 0 -1.5em;
}<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">CLIENTE</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
writing-mode: lr-tb;
margin: 0 -1.5em;
}<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">CLIENTE</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>edited Nov 19 at 15:31
user2154065
8022719
answered Nov 19 at 15:07
nvioli
2,26631228
edited Nov 19 at 15:31
user2154065
8022719
edited Nov 19 at 15:31
user2154065
8022719
edited Nov 19 at 15:31
user2154065
8022719
8022719
answered Nov 19 at 15:07
nvioli
2,26631228
answered Nov 19 at 15:07
nvioli
2,26631228
answered Nov 19 at 15:07
nvioli
2,26631228
2,26631228
thank you so much!
– L.BB
Nov 19 at 15:19
Prego, buona fortuna!
– nvioli
Nov 19 at 15:20
add a comment |
thank you so much!
– L.BB
Nov 19 at 15:19
Prego, buona fortuna!
– nvioli
Nov 19 at 15:20
thank you so much!
– L.BB
Nov 19 at 15:19
thank you so much!
– L.BB
Nov 19 at 15:19
Prego, buona fortuna!
– nvioli
Nov 19 at 15:20
Prego, buona fortuna!
– nvioli
Nov 19 at 15:20
add a comment |
up vote
0
down vote
Table data with 1% width having a paragraph which simply we can rotate but when there is more or less character you have to manually adjust margin and padding for the center class.
.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
transform: rotate(270deg);
margin: 0 -1.6em;
}<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">CLIENTE</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>answered Nov 19 at 15:36
Prameshwar Kumar
574
Can you add some explanation to your solution? Which steps are neccessary?
– Nico Haase
Nov 19 at 16:33
add a comment |
up vote
0
down vote
Table data with 1% width having a paragraph which simply we can rotate but when there is more or less character you have to manually adjust margin and padding for the center class.
.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
transform: rotate(270deg);
margin: 0 -1.6em;
}<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">CLIENTE</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>answered Nov 19 at 15:36
Prameshwar Kumar
574
Can you add some explanation to your solution? Which steps are neccessary?
– Nico Haase
Nov 19 at 16:33
add a comment |
up vote
0
down vote
up vote
0
down vote
Table data with 1% width having a paragraph which simply we can rotate but when there is more or less character you have to manually adjust margin and padding for the center class.
.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
transform: rotate(270deg);
margin: 0 -1.6em;
}<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">CLIENTE</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>answered Nov 19 at 15:36
Prameshwar Kumar
574
Table data with 1% width having a paragraph which simply we can rotate but when there is more or less character you have to manually adjust margin and padding for the center class.
.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
transform: rotate(270deg);
margin: 0 -1.6em;
}<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">CLIENTE</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
transform: rotate(270deg);
margin: 0 -1.6em;
}<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">CLIENTE</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>.rotate {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
transform: rotate(270deg);
margin: 0 -1.6em;
}<table class="TABELLA1" width="400px" align="left">
<tr height="90px">
<td width="1%">
<p id="idcliente" class="A8BL rotate">CLIENTE</p>
</td>
<td width="99%">
<div>
<div class="A8BL">
FACTORY 1<br>
253190 MILANO (IT)<br>
</div>
<div class="A8L">
Tel. 02 669172284<br>
e-mail: info@alufaoj.it
Cod. Fisc. <br>
e Partita IVA 2251364245341126
</div>
</div>
</td>
</tr>
</table>answered Nov 19 at 15:36
Prameshwar Kumar
574
edited Nov 20 at 1:38
answered Nov 19 at 15:36
Prameshwar Kumar
574
answered Nov 19 at 15:36
Prameshwar Kumar
574
answered Nov 19 at 15:36
Prameshwar Kumar
574
574
Can you add some explanation to your solution? Which steps are neccessary?
– Nico Haase
Nov 19 at 16:33
add a comment |
Can you add some explanation to your solution? Which steps are neccessary?
– Nico Haase
Nov 19 at 16:33
Can you add some explanation to your solution? Which steps are neccessary?
– Nico Haase
Nov 19 at 16:33
Can you add some explanation to your solution? Which steps are neccessary?
– Nico Haase
Nov 19 at 16:33
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53377340%2fhow-can-i-fully-control-a-div-rotation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
