I need help rotating the HTML body using CSS. Here is the code I have tried so far:
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
I have tested this in IE, Chrome, and Firefox, but it does not work in any browser. Can anyone point out what I might be doing wrong?
body {
font-family: Arial, Verdana;
font-size: 10pt;
background-color: #eeeeee;
margin: 0;
overflow: hidden;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/* Current day display */
#head {
font-weight: bold;
font-size: 30pt;
margin: 50px 0 30px 60px;
}
#page_navigation {
bottom: 0;
/*display: none;*/
margin-left: 10px;
height: 34px;
text-align: center;
position: fixed;
}
table {
width: 90%;
height: auto;
border-spacing: 2px;
}
th {
background-color: #009de0;
color: #ffffff;
}
td div {
overflow: hidden;
text-align: center;
}
.content {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
.c1 {
background-color: #c7ebfc;
width: 20%;
color: #009de0;
}
.c2 {
background-color: #c7ebfc;
width: 20%;
color: #009de0;
}
.c3 {
background-color: #c7ebfc;
width: 40%;
}
.c4 {
background-color: #b9e6fb;
width: 20%;
}
.c5 {
background-image: linear-gradient(to right, #D2D3D5 3%, #FFFFFF 8%, #D2D3D5 15%);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
}
.c6 {
position: relative;
margin: 28px 0 0 50px;
height: 50px;
z-index: 99;
}
.c7 {
width: 100%;
border-spacing: 1px;
}
.c8 {
width: 50%;
vertical-align: top;
}
.c9 {
width: 50%;
vertical-align: top;
}
.c10 {
height: 332px;
width: 627px;
}
.c11 {
width: 50%;
vertical-align: top;
}
.c12 {
width: 50%;
}<div id="content">
<div id="logo">
</div>
<div id="title">
Seminar
</div>
<div id="head">
</div>
<hr />
<div id='events_head'>
<table>
<tr>
<th class="c1">
Seminar
</th>
<th class="c2">
from
</th>
<th class="c3">
to
</th>
<th class="c4">
Buildung
</th>
<th class="c5">
Room
</th>
</tr>
</table>
</div>
<div id='events'>
</div>
<!-- An empty div which will be populated using jQuery -->
<div id='page_navigation'>
</div>
</div>