zoukankan      html  css  js  c++  java
  • 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放大或缩小对应倍数就行了,不过现在的宽屏看着有误差啊。

  • 相关阅读:
    字符编码ANSI和ASCII区别、Unicode和UTF-8区别
    《非暴力沟通》读后感
    软件测试
    报表导出测试点
    如何设计测试用例
    国密算法sm2.sm3.sm4
    免杀原理与实践
    SQL注入攻击
    网络攻防实践 第十周作业
    网络攻防实践第九周
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/4580877.html
Copyright © 2011-2022 走看看