常见的变换图形变化的CSS3的总结
旋转画面;单位度;度;意义
CSS代码将内容复制到剪贴板。
-moz变换:旋转(20deg);- WebKit的变换:旋转(20deg);- o-transform:旋转(20deg);- MS变换:旋转(20deg);
2.scale放大和缩小
缩放比例,如1.6放大1.6倍,如果-1.6然后小1.6倍。
CSS代码将内容复制到剪贴板。
WebKit的变换:规模(1.6);-moz变换:规模(1.6);- o-transform:规模(1.6);- MS变换:规模(1.6);
3.translate翻译
转换是一个有两个参数的指定对象的转换,第一个是在x轴的方向上移动,第二个是在y轴的方向上移动。如果第二个参数没有提供,默认值是0。
例如,你需要设置一个元素移动X轴方向和Y轴方向30px 20px当鼠标,可以写成如下:
CSS代码将内容复制到剪贴板。
{ #翻译演示:悬停
WebKit的变换:翻译(30px,20px);
-moz变换:翻译(30px,20px);
- o-transform:翻译(30px,20px);
MS变换:翻译(30px,20px);
变换:平移(30px,20px);
}
必须指出,现代主流浏览器的最新版本(该测试Chrome 22.0.1229.94 17.0.1,Firefox,Safari 5.1.7,Opera 12.12)除了WebKit内核铬和Safari不需要支持变换通过私有财产,而是由现代浏览器在变换属性是由私有财产的支持所需的早,所以为了与早期版本的浏览器兼容,各自的最佳使用私有财产变换在实际的项目中,而不需要向后兼容,并对私有财产的电话。
4.skew倾斜
斜指定元素为倾斜失真,在X轴和Y轴倾斜的元素,带两个参数,对应于x轴的一角、二轴方向的倾斜角与Y。如果不能提供第二参数,默认值是0。Skew是规模有点类似,但规模仅旋转元素,而不改变元素的形状,而斜将改变元件的形状。
例如,需要设置一个X轴的元素,当鼠标悬停在30度以上,Y轴倾斜30度扭转时,就可以写了:
CSS代码将内容复制到剪贴板。
{ #斜演示:悬停
WebKit的变换:斜(30deg,30deg);
-moz变换:斜(30deg,30deg);
- o-transform:斜(30deg,30deg);
MS变换:斜(30deg,30deg);
变换:斜(30deg,30deg);
}
值得注意的是,由于翻译、斜、规模以上是基于X、Y轴的值作为参数,所以为了方便,W3C还提供translatex和translatey,skewx scaleX和scaleY,和skewy,进行独立的X轴和Y轴方向效果设置。
5.matrix矩阵
矩阵是一个矩阵,其中使用3×3矩阵。
属性值是用矩阵表示的吗
是的,除了变换,CSS3和一些属性矩阵作为属性值,事实上,矩阵变换的最基本和最强大的转换值和偏差以及之前介绍过的旋转和缩放在底层的实现是通过矩阵,所以事实上所有的变换值都可以通过一个3×3矩阵。
我们知道,变换的x和y坐标系的二维转换,所以事实上,转型是通过变换方程改变每一点对一个元素的过程,并产生新的坐标值。因此,我们把旧的X和Y坐标,分别xprevcoordsys和yprevcoordsys值,和新的X和Y坐标xnewcoordsys和ynewcoordsys分别。由于变换是在2d进行的,Z坐标值被设置为1,然后我们建立另一个矩阵,矩阵如下所示。
然后,旧的坐标值和新的坐标值与矩阵如下所示:
这是旧的和新的价值观之间的联系可以用矩阵方程,所以开发商只能通过设置矩阵的值写一个自定义的转变。接下来,我们需要注意到,虽然矩阵是一个3×3矩阵,只需要填写实际应用6参数(其他3个无关的X和Y轴),又称为{ A B C D E F }。
例如,以下语句是书面的:
CSS代码将内容复制到剪贴板。
{ #矩阵演示:悬停
WebKit的变换矩阵(1, 1, 0,1, 0, 0);
-moz变换矩阵(1, 1, 0,1, 0, 0);
- o-transform:矩阵(1, 1, 0,1, 0, 0);
- MS变换:矩阵(1, 1, 0,1, 0, 0);
转换:矩阵(1, 1, 0,1, 0, 0);
}
这样,当鼠标悬停时,元素将在Y轴方向拉伸(相当于skewy效果(45deg))。
此外,如果同时使用两个或多个转换方法,则可以合并和写入。