`

IE矩阵滤镜Matrix旋转

 
阅读更多

SS3 transform与IE filter

 

.trans_skew { transform: skew(35deg); }

.trans_scale { transform:scale(1, 0.5); }

.trans_rotate { transform:rotate(45deg); }

.trans_translate { transform:translate(10px, 20px); }

 

http://www.useragentman.com/IETransformsTranslator/

 

#transformedObject {

     width:             220px;

     height:            220px;

 

     -moz-transform:    rotate(30deg)

                         scale(1.5)

                         translate(30px);

     -o-transform:      rotate(30deg)

                         scale(1.5)

                         translate(30px);

     -webkit-transform: rotate(30deg)

                         scale(1.5)

                         translate(30px);

     transform:         rotate(30deg)

                         scale(1.5)

                         translate(30px);

}

 

   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.2990381056766576, M12=-0.7500000000000007, M21=0.7500000000000007, M22=1.2990381056766576, SizingMethod='auto expand')";

   

    

   filter: progid:DXImageTransform.Microsoft.Matrix(

            M11=1.2990381056766576,

            M12=-0.7500000000000007,

            M21=0.7500000000000007,

            M22=1.2990381056766576,

            SizingMethod='auto expand');

 

filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand');

您想要把一个元素只是单纯的旋转135度的话直接就是(cos(135) = -0.707):

filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand');}

但是,同时你希望元素还放大两倍,那该怎么办呢,很简单,M11, M12, M21, M22同时乘以2就可以了,也就是:

filter:progid:DXImageTransform.Microsoft.Matrix(M11=-1.414,M12=-1.414,M21=0.1.414,M22=-1.414,SizingMethod='auto expand');}

 

-moz-transform:rotate(-90deg);

-webkit-transform:rotate(-90deg);

 

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 正度用此方法 0 1 2 3  0度 90度 180度 270度

这里,滤镜代码部分,前面长长的大小写错综的部分我们不用管它,看后面的”rotation=3″这是关键,这里的参数可以是0,1,2,3,没有4,要是是4啊,5啊之类的,图片就不旋转了。旋转的角度只要将这些数值乘以90(π/2)就可以了,所以呢”rotation=3″表示顺时针旋转270度,与transform:rotate(270deg);是一个意思。所以,这里,就会有些小小的局限——不能实现任意角度的旋转,只能是90度,180度以及270度。但是,IE浏览器不是个简单的罗罗,要实现任意角度的旋转,它还是有办法的,只是要比上面的麻烦些,难理解些,要用到矩阵变换滤镜。

 

要实现IE下任意角度图片的旋转记住下面的式子就可以了:filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand');

 

 

.rot1

{

-moz-transform:rotate(90deg);

-webkit-transform:rotate(90deg);

transform:rotate(90deg);

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

}

.rot2

{

-moz-transform:rotate(180deg);

-webkit-transform:rotate(180deg);

transform:rotate(180deg);

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

}

.rot3

{

-moz-transform:rotate(270deg); 

-webkit-transform:rotate(270deg); 

transform:rotate(270deg); 

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

 

#rot90

{

-moz-transform:rotate(90deg); 

-webkit-transform:rotate(90deg); 

transform:rotate(90deg); 

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

}

#rot135

{

-moz-transform:rotate(135deg); 

-webkit-transform:rotate(135deg); 

transform:rotate(135deg); filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand');

}

 

-webkit-transform-origin: bottom left;

transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0);

transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)

分享到:
评论

相关推荐

    咨询常用分析模型 内部-外部矩阵(Internal-External Matrix,IE矩阵).pdf

    内部-外部矩阵(Internal-External Matrix,简称IE矩阵)是一种战略管理工具,它主要用于帮助企业分析其业务组合。IE矩阵的前身是GE公司提出的多因素业务经营组合矩阵,又称为市场吸引力-经营实力矩阵(GE矩阵)。GE...

    IE矩阵Matrix滤镜旋转与缩放及如何结合transform

    【IE矩阵Matrix滤镜旋转与缩放】 在早期的Internet Explorer浏览器中,由于对CSS3标准的支持不足,开发者需要依赖滤镜(Filter)技术来实现一些先进的视觉效果,如旋转和缩放。Matrix滤镜是IE特有的滤镜之一,通过...

    矩阵计算 matrix computation

    这是一本很好的矩阵计算书,是研究数值计算方向的一本很好的工具书

    矩阵运算Matrix2D

    总的来说,`Matrix2D`类是处理2D几何变换的重要工具,通过封装矩阵运算,它可以高效地实现平移、旋转、缩放、错切等多种变换,广泛应用于2D图形渲染、游戏开发和计算机视觉等领域。理解并能熟练使用这样的类对于进行...

    矩阵计算matrix实用.pdf

    矩阵计算Matrix实用.pdf是Maplesoft公司开发的一款功能强大的矩阵计算工具,提供了多种矩阵操作和计算功能,包括矩阵的基本操作、线性代数计算、矩阵分解、矩阵乘法、矩阵求逆、矩阵行列式计算等。 LinearAlgebra...

    C#数值计算算法编程矩阵类Matrix的设计.doc

    w - 矩阵行数 * @param nCol - 矩阵列数 */private void Init(int nRow, int nCol){if (nRow || nCol ) throw new ArgumentException("Invalid matrix dimensions");eps = 1e-15; // 设置默认精度elements = new ...

    android 利用matrix实现图片的旋转与缩放

    Matrix类在Android图形处理中扮演着重要角色,它是一个3x3的矩阵,用于进行2D变换,如平移、旋转、缩放和倾斜等。本教程将深入讲解如何利用Matrix实现图片的旋转与缩放。 首先,我们需要了解Matrix的基本操作。在...

    matlab画word_matrix_旋转矩阵函数_

    本话题主要涉及的是如何利用MATLAB来创建和操作旋转矩阵,尤其是针对三维空间中的物体进行绕三个轴(X、Y、Z轴)的旋转。在描述中提到的"matlab2word.m"文件很可能是一个MATLAB脚本,它实现了这些旋转功能,并可能将...

    as3的颜色矩阵滤镜ColorMatrixFilter的使用

    在ActionScript 3 (AS3)中,颜色矩阵滤镜(ColorMatrixFilter)是一种强大的工具,用于对显示对象上的像素进行复杂色彩变换。这个滤镜允许开发者通过调整一个5x4的颜色矩阵来改变图像的色彩、亮度、对比度、饱和度等...

    矩阵运算Matrix,java实现

    例如,`Matrix.add(Matrix other)`方法会实现矩阵的加法,`Matrix.subtract(Matrix other)`方法会实现矩阵的减法,而`Matrix.multiply(Matrix other)`方法会处理矩阵乘法。矩阵的逆和特征值可能需要更复杂的算法,如...

    c++编写的 矩阵 matrix 类源码

    这里我们关注的是一份名为“matrix”的自定义C++类,它提供了对矩阵进行基本运算的功能,包括加减法、乘法以及矩阵的逆运算。下面我们将详细探讨这些知识点。 首先,`matrix.h`文件通常包含类的声明,定义了类`...

    编写代表矩阵的Matrix类

    该类包括矩阵行列数变量int rows和int cols,矩阵数据数组double data[][],构造方法Matrix()、Matrix(int rows,int cols)、Matrix(int rows,int cols,double data[][]),获取某元素值的方法getData(int row,int col...

    机器人旋转矩阵与欧拉角转换公式

    在机器人技术中,旋转矩阵和欧拉角是两个重要的概念,它们被用来描述和转换机器人的关节角度与在笛卡尔空间中的位置。本篇将详细阐述这两种表示方式以及它们之间的转换。 首先,让我们理解欧拉角。欧拉角是一种描述...

    旋转平移矩阵求解方法

    在三维空间中,物体的位置和方向通常通过一个4x4的齐次变换矩阵来表示,这个矩阵包含了旋转和平移的信息。对于题目所提及的“三维旋转平移矩阵求解”,我们将详细探讨如何构建和应用这样的矩阵,以及如何解决与之...

    罗德里格斯旋转矩阵推导_rodrigues_旋转矩阵_

    罗德里格斯旋转矩阵是三维空间中表示刚体旋转的一种方法,它是通过一个旋转矢量(也称为旋转向量)来描述旋转的。在计算机图形学、机器人学和许多其他工程领域,罗德里格斯公式是进行旋转操作的重要工具。 首先,...

    矩阵计算器 Matrix.exe

    矩阵计算器 Matrix.exe 适合各种矩阵计算

    三维坐标点 旋转矩阵 推导流程

    将各个旋转矩阵代入,可以得到一个三维旋转矩阵,该矩阵能够将原始坐标点转换为其旋转后的坐标。 \[ M_{ZYX} = \begin{bmatrix} \cos\text{Head}\cos\text{Roll} & -\sin\text{Head}\sin\text{Pitch}\cos\text{Roll...

    旋转矩阵计算欧拉角

    旋转矩阵与欧拉角之间的转换关系是计算机图形学、计算机视觉、机器人学以及运动学等领域的一个基础概念,它涉及到坐标变换以及物体姿态的表示。在三维空间中,一个旋转矩阵可以通过欧拉角来描述,反之亦然。具体来说...

Global site tag (gtag.js) - Google Analytics