css3 变形

css3变形

CSS3从IE滤镜偷窍过来的创意，但易用性明显提高了许多。利用这个，我们可以对某个元素进行旋传，缩放，倾斜与位移，并且区分元素类型，无论对块状元素还是内联元素都有效。

rotate(旋转)

rotate(angle)
rotate3d(x,y,z,angle)
rotateX(angle)单独设定rX轴的角度。
rotateY(angle)单独设定rY轴的角度。
rotateZ(angle)单独设定rZ轴的角度。
其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):

IE下可以使用BasicImage滤镜，但其rotate参数有个天然的缺陷只能取四个值

0不旋转
1顺时钟旋转90度
2顺时钟旋转180度
3顺时钟旋转270度
by司徒正美

CSS3transfromrorate旋转by司徒正美

测试






运行代码

这时我们就要动用万能的矩阵滤镜了DXImageTransform.Microsoft.Matrix。

//在IE旋转任意角度by司徒正美
functionrorateIt(node,deg){
//取得末变形前矩形的中点
varrect=node.getBoundingClientRect(),
cx1=(rect.right-rect.left)/2,//centerx
cy1=(rect.bottom-rect.top)/2,//centery
deg2rad=Math.PI/180,//角度转弧度
rad=degdeg2rad,
cos=Math.cos(rad),
sin=Math.sin(rad);
varident="DXImageTransform.Microsoft.Matrix";
node.style.filter="progid:"+ident+"(M11=''1.0'',sizingmethod=''autoexpand'')";
//http://www.satzansatz.de/cssd/onhavinglayout.html
if(!node.currentStyle.hasLayout){//在IE7中，如果没有获得hasLayout，滤镜会失效
node.style.writingMode="tb-rl";
}
varfilter=node.filters.item(ident);
//+-------+-------+
//|M11|M12|
//+-------+-------+
//|M21|M22|
//+-------+-------+
filter.M11=cos;
filter.M12=-sin;
filter.M21=sin;
filter.M22=cos;
//取得当前中心
rect=node.getBoundingClientRect();
varcx=(rect.right-rect.left)/2;
varcy=(rect.bottom-rect.top)/2;
//调整此元素的坐标系，实现CSS3transform-origin的功能
node.style.marginLeft=cx1-cx+"px";
node.style.marginTop=cy1-cy+"px";

}

CSS3transfromrorate旋转v2by司徒正美

IE中请点一下