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矩阵)是一种战略管理工具,它主要用于帮助企业分析其业务组合。IE矩阵的前身是GE公司提出的多因素业务经营组合矩阵,又称为市场吸引力-经营实力矩阵(GE矩阵)。GE...
【IE矩阵Matrix滤镜旋转与缩放】 在早期的Internet Explorer浏览器中,由于对CSS3标准的支持不足,开发者需要依赖滤镜(Filter)技术来实现一些先进的视觉效果,如旋转和缩放。Matrix滤镜是IE特有的滤镜之一,通过...
这是一本很好的矩阵计算书,是研究数值计算方向的一本很好的工具书
总的来说,`Matrix2D`类是处理2D几何变换的重要工具,通过封装矩阵运算,它可以高效地实现平移、旋转、缩放、错切等多种变换,广泛应用于2D图形渲染、游戏开发和计算机视觉等领域。理解并能熟练使用这样的类对于进行...
矩阵计算Matrix实用.pdf是Maplesoft公司开发的一款功能强大的矩阵计算工具,提供了多种矩阵操作和计算功能,包括矩阵的基本操作、线性代数计算、矩阵分解、矩阵乘法、矩阵求逆、矩阵行列式计算等。 LinearAlgebra...
w - 矩阵行数 * @param nCol - 矩阵列数 */private void Init(int nRow, int nCol){if (nRow || nCol ) throw new ArgumentException("Invalid matrix dimensions");eps = 1e-15; // 设置默认精度elements = new ...
Matrix类在Android图形处理中扮演着重要角色,它是一个3x3的矩阵,用于进行2D变换,如平移、旋转、缩放和倾斜等。本教程将深入讲解如何利用Matrix实现图片的旋转与缩放。 首先,我们需要了解Matrix的基本操作。在...
本话题主要涉及的是如何利用MATLAB来创建和操作旋转矩阵,尤其是针对三维空间中的物体进行绕三个轴(X、Y、Z轴)的旋转。在描述中提到的"matlab2word.m"文件很可能是一个MATLAB脚本,它实现了这些旋转功能,并可能将...
在ActionScript 3 (AS3)中,颜色矩阵滤镜(ColorMatrixFilter)是一种强大的工具,用于对显示对象上的像素进行复杂色彩变换。这个滤镜允许开发者通过调整一个5x4的颜色矩阵来改变图像的色彩、亮度、对比度、饱和度等...
例如,`Matrix.add(Matrix other)`方法会实现矩阵的加法,`Matrix.subtract(Matrix other)`方法会实现矩阵的减法,而`Matrix.multiply(Matrix other)`方法会处理矩阵乘法。矩阵的逆和特征值可能需要更复杂的算法,如...
这里我们关注的是一份名为“matrix”的自定义C++类,它提供了对矩阵进行基本运算的功能,包括加减法、乘法以及矩阵的逆运算。下面我们将详细探讨这些知识点。 首先,`matrix.h`文件通常包含类的声明,定义了类`...
该类包括矩阵行列数变量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的齐次变换矩阵来表示,这个矩阵包含了旋转和平移的信息。对于题目所提及的“三维旋转平移矩阵求解”,我们将详细探讨如何构建和应用这样的矩阵,以及如何解决与之...
罗德里格斯旋转矩阵是三维空间中表示刚体旋转的一种方法,它是通过一个旋转矢量(也称为旋转向量)来描述旋转的。在计算机图形学、机器人学和许多其他工程领域,罗德里格斯公式是进行旋转操作的重要工具。 首先,...
矩阵计算器 Matrix.exe 适合各种矩阵计算
将各个旋转矩阵代入,可以得到一个三维旋转矩阵,该矩阵能够将原始坐标点转换为其旋转后的坐标。 \[ M_{ZYX} = \begin{bmatrix} \cos\text{Head}\cos\text{Roll} & -\sin\text{Head}\sin\text{Pitch}\cos\text{Roll...
旋转矩阵与欧拉角之间的转换关系是计算机图形学、计算机视觉、机器人学以及运动学等领域的一个基础概念,它涉及到坐标变换以及物体姿态的表示。在三维空间中,一个旋转矩阵可以通过欧拉角来描述,反之亦然。具体来说...