旋转一个元素算是一个比较常见的需求了吧,在支持CSS3的浏览器中可以使用transform很容易地实现,这里有介绍:http://www.css88.com/archives/2168,这里有演示http://www.css88.com/tool/css3Preview/Transform.html,就不再介绍了。

在IE下旋转一个元素,则只能靠滤镜了。

如果只是以90度为单位旋转的话,简单地使用这个滤镜就好:

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=i)

其中i取0,1,2,3,分别代表旋转90度、180度、270度、360度。

而如果要实现任意角度旋转,则要使用Matrix(矩阵)滤镜。

网上介绍的方法都是这样:

filter:progid:DXImageTransform.Microsoft.Matrix(M11=m11,M12=m12,M21=m21,M22=m22,sizingMethod="auto expand");

设旋转角为x,用弧度表示。那么m11=cos(x),m12=-sin(x),m21=sin(x),m22=cos(x)

正弦sin的诱导公式(对边比斜边)

sin(2kπ+α)=sin α 
sin(π/2-α)=cos α
sin(π/2+α)=cos α 
sin(-α)=-sin α
sin(π+α)=-sin α 
sin(π-α)=sin α

余弦cos的诱导公式(邻边比斜边)

cos(2kπ+α)=cos α 
cos(π/2-α)=sin α 
cos(π/2+α)=-sin α
cos(-α)=cos α
cos(π+α)=-cos α 
cos(π-α)=-cos α

实测这个方法有效,但是它会绕元素原来轮廓的左边和上边转动,还是画个图示意一下:

如图所示,图形会贴着上边和左边旋转。

那如果我们要绕中间点旋转的话要怎么做呢?这就说来话长了,得讲到几何的向量方法。

坐标系中,每个点有一个坐标,比如点p(3,4),横坐标为3,纵坐标为4。

接下来,向量:简单理解为有方向的线段。

将点和原点连接起来,方向从原点指向点,即构成一个向量op。

通过这样的方式,我们就将向量与点一一映射起来了,研究点的时候就可以用向量来研究啦。

接下来,研究旋转的实质,P点绕原点O(顺时针)旋转角度α,即向量OP旋转α,新的点P‘坐标变为(3cosα-4sinα,4sinα+3cosα).

为什么会是这个值,

 被旋转了  并希望知道旋转后的坐标 :

请参阅http://zh.wikipedia.org/wiki/%E6%97%8B%E8%BD%AC(数学里面以逆时针为正方向,所以公式在符号上略有不同)

上面新坐标中,在原坐标上进行的计算的数cosα,-sinα,sinα,cosα刚好就是上上面IE的matrix中的参数m11,m12,m21,m22!

事实上,上面的计算一般会写成矩阵的方式来进行,见维基百科的表示方法。

所以,matrix滤镜的实质是对图形进行坐标的矩阵运算。

上面说的是绕原点O旋转,如果绕的是非原点呢?情况比较复杂,详见http://hi.baidu.com/windsion/blog/item/b4a41951699aa0c9b645ae4f.html

大致分为三步:

  1. 整体位移,即把中心点和向量做相应位移,使旋转点变为原点
  2. 绕原点旋转,和上面说的一样
  3. 整体位移,再将中心点移回原来的地方去

这个时候,计算的矩阵就变得复杂了(上面文章的最下方)。

而事实上,这个矩阵是可以化简的,详见这里http://stackoverflow.com/questions/5051451/javascript-ie-rotation-transform-maths

最终,我们得到除了上面的m11,m12,m21,m22之外的另外两个数,这两个数在IE的matrix滤镜中表示为Dx,Dy。

将这六个参数写入matrix滤镜,即可绕中心点旋转了。

完整的写法:

progid:DXImageTransform.Microsoft.Matrix(Dx=dx,Dy=dy,M11=m11,M12=m12,M21=m21,M22=m22);

其中

dx=-width/2*cosdeg+height/2*sindeg+width/2, dy=-width/2*sindeg-height/2*cosdeg+height/2 m11,m12,m21,m22与前面说的一样。

哦哦,对了,微软官方说了http://msdn.microsoft.com/en-us/library/ms532872(v=vs.85).aspx,如果sizingMethod=”auto expand”,那么Dx、Dy是无效的哦。所以去掉就好啦。

最后的最后,sizingMethod是什么意思呢,如果不设它的话,旋转对象的容器大小会是固定的,所以可能有遮挡的情况,自己要调整好大小,而如果它被设为auto expand,就是自动扩展的意思,即旋转时外面的容器大小会自动调整,以便不遮挡正在旋转的元素。

ie旋转滤镜Matrix的更多相关文章

  1. 兼容所有浏览器的旋转效果-IE滤镜Matrix和CSS3transform

    在现代浏览器中使用CSS3的transform样式即可轻松搞定,但是对于国内IE浏览器(特别是7,8)还占有较大份额的情况下,兼容性还是必须要考虑的,所以也特意记录下IE旋转滤镜的使用. 在IE下的旋 ...

  2. 【转载】CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu.com/wordpress/2018/11/css-f ...

  3. Android 图片旋转(使用Matrix.setRotate方法)

    imageView2 = (ImageView) findViewById(R.id.img2); Bitmap bitmap = BitmapFactory.decodeResource(getRe ...

  4. Bitmap与Matrix旋转ImageView

    Bitmap与Matrix旋转ImageView 标签: matrixfloatbutton测试importlayout 2010-08-23 22:18 8569人阅读 评论(0) 收藏 举报  分 ...

  5. CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  6. CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  7. Android立体旋转动画实现与封装(支持以X、Y、Z三个轴为轴心旋转)

    本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...

  8. 【CSS3】CSS3 滤镜实现

    作者:^_^肥仔John      来源:CSS3魔法堂:CSS3滤镜及Canvas.SVG和IE滤镜替代方案详解 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后 ...

  9. CSS 2D转换 matrix() 详解

    2D转换 IE10.Firefox.Opera 支持 transform 属性 Chrome.Safari 需要前缀 -webkit- . IE9 需要前缀 -ms- . translate():接收 ...

随机推荐

  1. 【SQL查询】集合查询之INTERSECT

    [SQL查询]集合查询之INTERSECT 1  BLOG文档结构图 2  前言部分 2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识,~ ...

  2. 【bzoj3150】 cqoi2013—新Nim游戏

    www.lydsy.com/JudgeOnline/problem.php?id=3105 (题目链接) 题意 在第一个回合中,第一个游戏者可以直接拿走若干个整堆的火柴.可以一堆都不拿,但不可以全部拿 ...

  3. inno setup 打包

    ; -- Example1.iss -- ; Demonstrates copying files and creating an icon. ; SEE THE DOCUMENTATION FOR ...

  4. 编写程序输入一个5x5的矩阵,将最大元素与中心元素交换,并按行列对齐输出。

    编写程序输入一个5x5的矩阵,将最大元素与中心元素交换,并按行列对齐输出. 题目描述 编写程序输入一个5x5的矩阵,将最大元素与中心元素交换,并按行列对齐输出. 输入描述 编写程序输入一个5x5的矩阵 ...

  5. LeetCode-101.对称二叉树

    链接:https://leetcode-cn.com/problems/symmetric-tree/description/ 给定一个二叉树,检查它是否是它自己的镜像(即,围绕它的中心对称). 例如 ...

  6. hive的join

    第一:在map端产生join          mapJoin的主要意思就是,当链接的两个表是一个比较小的表和一个特别大的表的时候,我们把比较小的table直接放到内存中去,然后再对比较大的表格进行m ...

  7. node之http模块总结

    [文档归档文] 参考文献:https://nodejs.org/dist/latest-v6.x/docs/api/http.html

  8. ROS下利用realsense采集RGBD图像合成点云

    摘要:在ROS kinetic下,利用realsense D435深度相机采集校准的RGBD图片,合成点云,在rviz中查看点云,最后保存成pcd文件. 一. 各种bug 代码编译成功后,打开rviz ...

  9. Shell - 文本处理

    珠玉在前,不再赘言. 常用命令 LinuxShell文本处理工具集锦 数据工程师常用的Shell命令 文件和目录管理 简明教程 AWK简明教程 SED简明教程 命令详解 linux sort,uniq ...

  10. log4.net 配置-控制台输出带颜色的日志

    一般对控制台输入的日志我们使用的 Appender 为 ConsoleAppender ,日志为白色文字. 当我们想到 DEBUG,INFO,WARN,ERROR  每种日志设置一种颜色时我们需要将  ...