通过CSS旋转html body

Question

我想通过CSS旋转html body。 我试过至今下面的代码：

-webkit-transform: rotate(90deg); 
-moz-transform: rotate(90deg); 
-o-transform: rotate(90deg); 
-ms-transform: rotate(90deg); 
transform: rotate(90deg); 

我试过在IE，Chrome和Firefox，但它不与任何浏览器。 我做错了什么？

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); 
 
} 
 
/* Datumsanzeige aktueller Tag */ 
 

 
#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: -webkit-gradient(linear, left top, right top, color-stop(0.12, #D2D3D5), color-stop(0.25, #FFFFFF), color-stop(0.37, #D2D3D5)); 
 
    background-image: -o-linear-gradient(right, #D2D3D5 3%, #FFFFFF 8%, #D2D3D5 15%); 
 
    background-image: -moz-linear-gradient(right, #D2D3D5 3%, #FFFFFF 8%, #D2D3D5 15%); 
 
    background-image: -webkit-linear-gradient(right, #D2D3D5 3%, #FFFFFF 8%, #D2D3D5 15%); 
 
    background-image: -ms-linear-gradient(right, #D2D3D5 3%, #FFFFFF 8%, #D2D3D5 15%); 
 
    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>

Answer 1

虽然你提供的代码似乎工作，这里有一个jQuery的解决方案，您可以试试。 （你没有jQ标记，但它在你的代码中。）

我刚刚写了这个旋转东西的插件。

jQuery.fn.rotate = function(degrees,speed,d) { 
    if(typeof speed == 'undefined') var speed = 50; 
    if(typeof degrees == 'undefined') var degrees = 360; 
    if(typeof d =='undefined') var d = 0; 
    context = this; 
    setTimeout(function(){ 
     console.log(d); 
     $(context).css({ 
      '-webkit-transform' : 'rotate('+d+'deg)', 
      '-moz-transform' : 'rotate('+d+'deg)', 
      '-ms-transform' : 'rotate('+d+'deg)', 
      'transform' : 'rotate('+d+'deg)' 
     }); 
     d++; 
     if(d<=degrees) $(context).rotate(degrees,speed,d); 
    },speed) 
}; 

第一个参数是旋转度，第二个是旋转速度，忽略第三个参数。

添加插件代码到你的页面后，你可以这样做：

$('body').rotate(90, 10); 

将页面旋转90度。

这里有一个小提琴：http://jsfiddle.net/63u1bgfw/