WEB前端

今天网上闲逛，看到克军写了一句话，恶搞一下。凭着这句话的吸引力，我点进去了。

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

真好奇，立即启动火狐看了一下，哈哈，找到原因了，马上在试了一下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代码贴出来。嘿嘿！

<script>
;(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';
})();
</script>

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