页面翻转,让你的页面旋转一下

<转>页面翻转,让你的页面旋转一下

n.styleSheet.cssText = r;这个写法是亮点,动态载入过css,但从来都没这么载入过,在公司的项目中试了下,不一样的感觉.很搞怪.

原帖:http://www.webchina110.cn/?p=328
今天网上闲逛，看到克军写了一句话，恶搞一下。凭着这句话的吸引力，我点进去了。

哇，居然页面倒过来了，页头和页脚翻了一个根头，其实我以前还在想，背景图片是不是可以这样呢，今天至少在页面上看到了。

真好奇，立即启动火狐看了一下，哈哈，找到原因了，马上在试了一下IE，搞定，也OK，哈哈，如果不知道的同学们，我想你们也想知道这是怎么回事吧。

其实就是这个东东在做怪。。。

-moz-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

三行代码，分别用来支持moz，webkit和IE的内核的浏览器。

我们看看克军是怎么做的呢，他使用了JS，让代码立即执行的方式。。给页面增加一个<sytle>和相应的样式，并且为body增加相应的class.下面我将他的js代码贴出来。嘿嘿！

;(function(){
var d = document, n = d.createElement('style'), r='.flip { -moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); }';
n.type = 'text/css';
if(n.styleSheet)
{
 n.styleSheet.cssText = r;
}
else
{
 n.appendChild(d.createTextNode(r))
}
d.getElementsByTagName('head')[0].appendChild(n);
d.body.className += ' flip';
}

为了使用document方便，他把document传给了变量d,建立了一个style标签为变量n，把样式的内容传给
了变量r，克军的命名都很简洁。
在为这个n其实就是style标签了type这个属性。
下面是进行判断页面中style有不有属性，如果没有，直接将r，也就是样式的内容放入n中。
如果有，就得使用建立文本并且追加的方式。
我不知道我的解释对不对哈，反正大概意思就是这样的，欢迎指正。
一切准备就绪以后，就将n添加到head中去，在将class增加到body上，这样页面一加载。。。。你的页面就会被旋转180度，当然你可以旋转90度，10度，数字是可以调整的哟。

2010.09.30  今天在使用过程中，最后发现，原来ie只支持4个值，分别旋转值可以是1，2，3或4。这些数字分别代表90，180，270，或360度旋转。