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)
相关推荐
本文将介绍IE矩阵Matrix滤镜旋转与缩放及如何结合transform,需要了解的朋友可以参考下
内部-外部矩阵(Internal-External Matrix,IE矩阵)
这是一本很好的矩阵计算书,是研究数值计算方向的一本很好的工具书
矩阵计算matrix实用.pdf
该类包括矩阵行列数变量int rows和int cols,矩阵数据数组double data[][],构造方法Matrix()、Matrix(int rows,int cols)、Matrix(int rows,int cols,double data[][]),获取某元素值的方法getData(int row,int col...
三维旋转平移矩阵求解 三维旋转平移矩阵求解 三维旋转平移矩阵求解 三维旋转平移矩阵求解 三维旋转平移矩阵求解
矩阵计算器 Matrix.exe 适合各种矩阵计算
dotnet矩阵类库matrix_src
西门子安全矩阵Safety Matrix使用入门——初级篇pdf,西门子安全矩阵Safety Matrix使用入门——初级篇
essential matrix 本质矩阵essential matrix 本质矩阵essential matrix 本质矩阵
压缩包内是一个.exe文件,导入图片后,通过修改ColorMatrixFilter的Matrix属性的参数可以直观看到图片添加滤镜后的变化。方便大家找到合适的参数。
COMP_DECOMP_MATRIX:从欧拉角(以度为单位)组成 3x3 旋转矩阵或将 3x3 旋转矩阵分解为欧拉角(以度为单位) 输入:1x3 欧拉向量围绕 x 旋转 (1), y 旋转 (2) 和 z、旋转 (3) 或 3x3 旋转矩阵输出:表示绕 x、y 和 ...
双色球选个号码出中型旋转矩阵旋转矩阵公式.pdf
1. Qt5.9 2. OpenGL 3.3 3.矩阵:缩放矩阵,旋转矩阵 移动矩阵. 4.shader :mat4x4
matlab 生成一个旋转矩阵,满足旋转矩阵条件 R*R' = E, det(R) = 1
矩阵计算matrix整理.pdf
关于矩阵论的。 matrix theory,易懂。绝对是一本权威书。
very good Matrix Analysis
C#数值计算算法编程矩阵类Matrix的设计.doc