帮助:CSS转换
二维转换
CSS转换原点
单位:%,px,pt,pc,em,ex x: 左、中、右、长度单位(默认值:50%) y: 顶部、中心、底部、长度单位(默认值:50%) z: 长度(默认值:0) 变换原点:x y; -ms-变换-原始值:x y;/* Internet Explorer(仅适用于二维转换,更改x轴和y轴)*/ -moz变换原点:x y;/* Firefox(仅适用于二维转换,更改x轴和y轴)*/ -webkit变换原点:x y z;/* Safari和Chrome(仅适用于2D和3D转换,更改x、y和z轴)*/ -o变换原点:x y;/* Opera(仅适用于2D转换,更改x轴和y轴)*/
CSS翻译
单位:%,px,pt,pc,em,ex tx:长度单位(默认值:0) ty:长度单位(默认值:0) 变换:平移(tx-ty); -ms-transform:翻译(tx-ty);/* Internet Explorer(Internet Explorer)*/ -moz变换:平移(tx-ty);/* Firefox浏览器*/ -webkit-transform:翻译(tx-ty);/* Safari和Chrome*/ -o-transform:平移(tx-ty);/* 歌剧*/ 翻译?: 平移X,平移Y t?: tx、ty 转换:转换? (t?); -ms-transform:翻译? (t?);/* Internet Explorer(Internet Explorer)*/ -moz变换:翻译? (t?);/* Firefox浏览器*/ -webkit-transform:翻译? (t?);/* Safari和Chrome*/ -o变换:平移? (t?);/* 歌剧*/
CSS缩放
单位:% sx:因子单位(默认值:100%) sy:因子单位(默认值:100%) 变换:尺度(sx-sy); -ms-转换:比例(sx-sy);/* Internet Explorer(Internet Explorer)*/ -moz变换:缩放(sx-sy);/* Firefox浏览器*/ -webkit-transform:规模(sx-sy);/* Safari和Chrome*/ -o变换:缩放(sx-sy);/* 歌剧*/ 比例?: 缩放X,缩放Y s?: sx、sy 变换:缩放? (s?); -ms-transform:规模? (s?);/* Internet Explorer(Internet Explorer)*/ -moz变换:缩放? (s?);/* Firefox浏览器*/ -webkit-transform:规模? (s?);/* Safari和Chrome浏览器*/ -o变换:缩放? (s?);/* 歌剧*/
CSS旋转
单位:deg,rad θ:角度单位 变换:旋转(θ); -ms-变换:旋转(θ);/* Internet Explorer*/ -moz变换:旋转(θ);/* Firefox浏览器*/ -webkit转换:旋转(θ);/* Safari和Chrome*/ -o变换:旋转(θ);/* 歌剧*/
CSS倾斜
单位:deg,rad thetaX:角度单位 thetaY:角度单位 变换:倾斜(thetaX thetaY); -ms-转换:倾斜(θXθY);/* Internet Explorer(Internet Explorer)*/ -moz变换:偏斜(thetaX thetaY);/* Firefox浏览器*/ -webkit转换:倾斜(thetaX thetaY);/* Safari和Chrome*/ -o变换:倾斜(θXθY);/* 歌剧*/ 倾斜?: 偏斜X,偏斜Y θ?: θX,θY 变换:扭曲? (θ?); -ms-transform:歪斜? (θ?);/* Internet Explorer(Internet Explorer)*/ -moz变换:扭曲? (θ?);/* Firefox浏览器*/ -webkit-transform:歪斜? (θ?);/* Safari和Chrome*/ -o变换:扭曲? (θ?);/* 歌剧*/
CSS仿射变换矩阵
-
矩阵(scaleX()、stakeY()、takeX(),scaleY(),translateX()和translateY())
三维变换
-
平移3d(x,y,z) -
平移z(z)
-
缩放3d(sx,sy,sz) -
比例尺Z(sz)
-
rotateX(值) -
旋转Y(值) -
旋转3d(x,y,z)
-
矩阵3d(…) (以编程方式描述4x4矩阵中的3D转换。不打算手动编写!)
-
透视图(值)
笔记
外部链接
-
使用CSS转换旋转元素 -David Walsh博客。 -
WebKit CSS转换 -Dave Hyatt于2007年10月26日(星期五)发布。 -
CSS3转换属性 -W3Schools.com网站 -
CSS3变压器原点属性 -W3Schools.com网站 -
转型 -CSS-技巧。