html - 通过 CSS 旋转 html 正文

Question

我正在尝试通过 CSS 旋转 html 正文。 到目前为止我尝试的是以下代码:

-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 度。

这是一个 fiddle :http://jsfiddle.net/63u1bgfw/