Css-控制div斜转

 

必须放在css声明中

div {
    transform: rotate(45deg);
    -o-transform: rotate(45deg);
    float: right;
    -webkit-transform: rotate(45deg); /*Safari 4+,Google Chrome 1+ */
    -moz-transform: rotate(45deg); /*Firefox 3.5+*/
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5);
    /*ie*/
    progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
    color: #FFDC93;
    font-weight: bold;
    font-size: 16px;
}

IE滤镜 rotation 有4个值 0 1 2 3 ；0是不旋转 1=90度 2=180度 3=270度

 

 

IE的角度任意角度就比较麻烦，要用ie矩阵滤镜，代码如下：

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)";

 

 

你可以尝试一下，这个是大约40多度的角度。

 

尝试之后瞬间觉得很强大，但是还有个大坑，那就是M11--M22哪里来的？

经过学习，
M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation) roation就是你的角度喽，不过遗憾的是直接这样写不行的，你必须自己算出数字，这里附赠一个算三角函数的在线无网址：http://www.ab126.com/geometric/1689.html.

最后补充一下，DXImageTransform.Microsoft.Matrix可以让你的div放大缩小，只要将M11--M22放大或缩小对应倍数就行了，不过现在的宽屏看着有误差啊。