网站建设拍金手指谷哥12,网站别人帮做的要注意什么,刷题网站怎么做,响应式网站建设的未来发展6一、哥#xff0c;我被你吓住了 打架的时候会被块头大的吓住#xff0c;学习的时候会被奇怪名字吓住#xff08;如“拉普拉斯不等式”#xff09;。这与情感化设计本质一致#xff1a;界面设计好会让人觉得这个软件好用#xff01; 所以#xff0c;当看到上面“Matrix(矩… 一、哥我被你吓住了 打架的时候会被块头大的吓住学习的时候会被奇怪名字吓住如“拉普拉斯不等式”。这与情感化设计本质一致界面设计好会让人觉得这个软件好用 所以当看到上面“Matrix(矩阵)”的时候难免会心生畏惧即使你已经学过正常心理。实际上这玩意确实有点复杂。 然而这却是屌丝逆袭的一个好机会。 CSS同行间 你是不是有这样的感觉哎呀呀每天就是对着设计图切页面貌似技术没有得到实质性地提升啊或者觉得日后高度有限 我们应该都知道二八法则(巴莱多定律)即任何一组东西中最重要的只占其中一小部分约20%其余80%的尽管是多数却是次要的。如果你有上述的感觉那你就属于那80%, 一抓一大把没有特色的页面仔。 CSS门槛低无需程序基础或数学逻辑能力也能做出点自我感觉不错的东西。然而你自己也应该清楚的一般你能轻松学到的东西别人也可以。因此如果你想挤进那20%的行列就要学到一般人学不到的深度学到一般人学不了的东西。自然是需要更多额外的努力的。如果每次你都比别人努力一点点何愁不比他人高出几等。人年轻的时候贵在坚持 而这里的CSS矩阵就是展现你与其他芸芸同行差异的好契机。很多人看到名字就畏惧了看到奇怪的数学书写就吓退了而你没有迎难而上把摇手机的时间用在理解矩阵上。自然你就冒尖了一点。类似的很多其他CSS方面的东西你也比别人多深入学习一点怎么可能就是个普通的页面仔呢 因此从这里开始摆脱那80%的行列吧 伪同行间 虽然都是从事计算机虽然都是从事互联网虽然都是写代码的(据说)写JAVA的瞧不起写JavaScript的写JavaScript的瞧不起写CSS的。这可以理解虽然养鸡养鸭成为富翁的不在少数但是一说你是农村养鸡的怎么样上海专业的丈母娘们的视线立马下降60°——被BS了。倒不是因为你是干农业的而是“鸡”的问题如果说你是饲养斯里兰卡蓝孔雀的得挑剔的丈母娘们说不定就会正脸看看唷斯里兰卡国外货唷孔雀高档货。 同样的如果你掌握的CSS都是些“砌砖头”的活虽然砌砖头也是大学问被无视也情理之中。但是矩阵这个东西就是扭转乾坤网称“逆袭”的好东西CSS中也是有复杂的高档货的。再忽悠些“图形算法、位置计算”之类的词句嘿嘿立马看法从变成。 二、何为矩阵 矩阵可以理解为方阵只不过平时方阵里面站的是人矩阵中是数值 → 而所谓矩阵的计算就是两个方阵的人可以想象成古代的方阵士兵相互冲杀。 CSS3中的矩阵 CSS3中的矩阵指的是一个方法书写为matrix()和matrix3d()前者是元素2D平面的移动变换(transform)后者则是3D变换。2D变换矩阵为3*3, 如上面矩阵示意图3D变换则是4*4的矩阵。 有些迷糊恩我也觉得上面讲述有些不合时宜。那好我们先看看其他东西层层渐进——transform属性。 具体关于transform属性具体内容可以点击这里补个课。稍微熟悉的人都知道transform中有这么几个属性方法 .trans_skew { transform: skew(35deg); }
.trans_scale { transform:scale(1, 0.5); }
.trans_rotate { transform:rotate(45deg); }
.trans_translate { transform:translate(10px, 20px); }斜拉(skew)缩放(scale)旋转(rotate)以及位移(translate)。 那你有没有想过为什么transform:rotate(45deg);会让元素旋转45°, 其后面运作的机理是什么呢 下面这张图可以解释上面的疑问 无论是旋转还是拉伸什么的本质上都是应用的matrix()方法实现的修改matrix()方法固定几个值只是类似于transform:rotate这种表现形式我们更容易理解记忆与上手。 换句话说理解transform中matrix()矩阵方法有利于透彻理解CSS3的transform属性这就与那80%的也会应用但只知表象的人拉开了差距 OK现在上面提到的CSS3矩阵解释应该说得通了。 三、矩阵应用场景 虽然题目写的是“transform中的Matrix”实际上在CSS3以及HTML5的世界里这玩意还是涉猎蛮广的如SVG以及canvas. 事实上关于矩阵我之前曾经介绍过是在介绍IE浏览器下的Matrix矩阵滤镜的时候说过IE的滤镜矩阵与CSS中的矩阵虽然写法上差异较大但是矩阵计算的原来是一致的。只是之前的介绍主要是IE下的旋转与缩放同时也不是很深入因此还有有些局限的。 四、transform与坐标系统 用过transform旋转的人可以发现了其默认是绕着中心点旋转的而这个中心点就是transform-origin属性对应的点也是所有矩阵计算的一个重要依据点下图参考自dev.opera.com。 当我们通过transform-origin属性进行设置的时候矩阵相关计算也随之发生改变。反应到实际图形效果上就是旋转拉伸的中心点变了 举例来说如果偶们设置 -webkit-transform-origin: bottom left; 则坐标中心点就是左下角位置。于是动画例如图片收缩就是基于图片的左下角这一点了 上图效果可以点击这里查看Chrome浏览器。 再举个稍微难理解的例子我们如果这样设置 transform-origin: 50px 70px; 则中心点位置有中间移到了距离左侧50像素顶部70像素的地方参见下图而此时的(30, 30)的坐标为白点所示的位置这个位置后面会用到。 仔细看看是不是很快就理解了哈~~ 五、准备好了没重头戏来了 CSS3 transform的matrix()方法写法如下 transform: matrix(a,b,c,d,e,f); 吓住了吧这多参数一个巴掌都数不过来。好吧如果你把a~f这6个参数想象成女神的名词你会觉得世界不过如此嘛~~ 实际上这6参数对应的矩阵就是 注意书写方向是竖着的。 上面提过矩阵可以想象成古代的士兵方阵要让其发生变化只有与另外一个士兵阵火拼就可以了即使这是个小阵。 反应在这里就是如下转换公式 其中x, y表示转换元素的所有坐标变量了。那后面的axcye怎么来的呢//zxx:大学时候线性代数知识懂的人这里可以直接跳过 很简单3*3矩阵每一行的第1个值与后面1*3的第1个值相乘第2个值与第2个相乘第3个与第3个然后相加如下图同色标注 那axcye的意义是什么 记住了axcye为变换后的水平坐标bxdyf表示变换后的垂直位置。 又迷糊了不急一个简单例子就明白了。 假设矩阵参数如下 transform: matrix(1, 0, 0, 1, 30, 30); /* a1, b0, c0, d1, e30, f30 */ 现在我们根据这个矩阵偏移元素的中心点假设是(0, 0)即x0, y0。 于是变换后的x坐标就是axcye 1*00*030 30, y坐标就是bxdyf 0*01*030 30. 于是中心点坐标从(0, 0)变成了→(30, 30)。对照上面有个(30, 30)的白点图好好想象下原来(0,0)的位置移到了白点的(30, 30)处怎么样是不是往右下方同时偏移了30像素哈 实际上transform: matrix(1, 0, 0, 1, 30, 30);就等同于transform: translate(30px, 30px);. 注意translate, rotate等方法都是需要单位的而matrix方法e, f参数的单位可以省略。 一例胜万语您可以狠狠地点击这里matrix(1,0,0,1,30,30)实例demo 在现代浏览器下会有类似下面动图的效果 效果只是表象的我想到了一个更好的idea去表现矩阵到底是如何变换的您可以狠狠地点击这里matrix分解变换演示 为了提高性能demo中每个单元分解成了5px * 5px的区域。演示分两步先是演示每个单元的位置是如何计算的接着动画表现其位置的偏移。 这个demo所做的工作就是把浏览器瞬间完成的计算和渲染变成了可控的分步显示这样大家就可以很直观地看出这个矩阵计算到底是如何起作用的。下图为正在演示过程中的截图 //zxx:由于默认100毫秒间隔不断渲染因此如果你电脑CPU或是浏览器hold不住可以取消“自动演示”的勾选然后点击左边的按钮手动分步查看。 总结 聪明的你可能以及意识到了尼玛matrix表现偏移就是 transform: matrix(与我无关, 哪位, 怎么不去高考, 打麻将去吧, 水平偏移距离, 垂直偏移距离); 你只要关心后面两个参数就可以了至于前面4个参数是牛是马是男是女都没有关系的。 六、transform matrix矩阵与缩放旋转以及拉伸 偏移是matrix效果中最简单最容易理解的因此上面很详尽地对此进行展开说明。下面为了进一步加深对matrix的理解会简单讲下matrix矩阵与缩放旋转以及拉伸效果。 缩放(scale) 上面的偏移只要关心最后两个参数这个缩放也是只要关心两个参数。哪两个呢 如果你足够明察秋毫应该已经知道了因为上面多次出现的 transform: matrix(1, 0, 0, 1, 30, 30); 已经出卖了。 发现没matrix(1, 0, 0, 1, 30, 30);的元素比例与原来一样1:1, 而这几个参数中有两个1, 啊哈哈没错这两个1就是缩放相关的参数。 其中第一个缩放x轴第二个缩放y轴。 用公式就很明白了假设比例是s则有matrix(s, 0, 0, s, 0, 0);于是套用公式就有x axcye s*x0*y0 s*x;y bxdyf 0*xs*y0 s*y; 也就是matrix(sx, 0, 0, sy, 0, 0);等同于scale(sx, sy); 好了至此无需多说了…… 眼见为实因此demo还是要滴您可以狠狠地点击这里matrix矩阵与缩放demo 为了避免元素比例放大时候遮盖上面的文本框以及描述位子因此将元素的坐标原点迁至了左上角。 旋转(rotate) 旋转相比前面两个要更高级些要用到可能勾起学生时代阴影的三角函数。 方法以及参数使用如下假设角度为θ matrix(cosθ,sinθ,-sinθ,cosθ,0,0) 结合矩阵公式就有 x x*cosθ-y*sinθ0 x*cosθ-y*sinθ
y x*sinθy*cosθ0 x*sinθy*cosθ 这个与IEMatrix滤镜中的旋转是有些类似的(M11表示矩阵第1行第1个参数aM21表示矩阵第2行第一个参数b……) filter:progid:DXImageTransform.Microsoft.Matrix(M11cosθ,M21sinθ,M12-sinθ,M22cosθ); 哎呀呀四个参数我记不住啊莫慌我们可以这样子记忆 CS-SC初三-上床对称结构这下忘不了了吧~~ 您可以狠狠地点击这里transform matrix矩阵与旋转demo 不过说句老实话就旋转而言rotate(θdeg)这种书写形式要比matrix简单多了首先记忆简单其次无需计算。例如旋转30°前者直接 transform:rotate(30deg); 而使用matrix表示则还要计算cos, sin值 transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0); 拉伸(skew) 拉伸也用到了三角函数不过是tanθ而且其至于b, c两个参数相关书写如下注意y轴倾斜角度在前 matrix(1,tan(θy),tan(θx),1,0,0) 套用矩阵公式计算结果为 x xy*tan(θx)0 xy*tan(θx)
y x*tan(θy)y0 x*tan(θy)y 对应于skew(θx degθy deg)这种写法。 其中θx表示x轴倾斜的角度θy表示y轴两者并无关联。 还是靠实例说话吧您可以狠狠地点击这里matrix矩阵与拉伸demo 在Chrome下可以很动态地查看不同倾斜角度对应的拉伸的效果 七、既然有简单的skew, rotate..那matrix有何用 我想有人会奇怪既然CSS3 transform中提供了像skew, rotate, …效果那还需要掌握和熟悉让人头大的矩阵方法干嘛呢 好问题确实对于一般地交互应用transform属性默认提供的些方法是足够了但是一些其他的效果如果transform属性没有提供接口方法那你又该怎么办呢比方说“镜像对称效果” 没辙了吧这是就只能靠matrix矩阵了。要知道matrix矩阵是transform变换的基础可以应付很多高端的效果算是一种高级应用技巧吧。掌握了基础才能兵来将挡水来土掩啊。 OK这里就演示下如何使用CSS3 transform matrix矩阵实现镜像效果。 这个有点难度因此我们先看demo您可以狠狠地点击这里matrix与镜像对称效果demo 框框中输入旋转的角度值用来确定镜像的对称轴然后失去焦点就会呈现出对应的镜像对称效果了 您可以在FireFox或是Chrome等浏览器上体验下matrix实现的镜像渐变效果。 demo页面中的一个轴是为了便于理解我加上的效果实际上在镜像对称的时候轴是看不见的。 轴围绕的那个点就是CSS3中transform变换的中心点自然镜像对称也不例外。因为该轴永远经过原点因此任意对称轴都可以用y k * x表示。则matrix表示就是 matrix((1-k*k) / (1k*k), 2k / (1 k*k), 2k / (1 k*k), (k*k - 1) / (1k*k), 0, 0) 这个如何得到的呢 啊高中数学来了就当再高考一次吧如下图已经ykx并且知道点(x, y)坐标求其对称点(x’, y’)的坐标 很简单一是垂直二是中心点在轴线上因此有 (y-y) / (x - x) -1/ k → ky-ky -xx(x x) / 2 * k y y → kxkx yy 很简单的把x和y提出来就有 x (1-k*k)/(k*k1) *x 2k/(k*k1) *y;y 2k/(k*k1) *x (k*k-1)/(k*k1) *y; 再结合矩阵公式x axcye;y bxdyf; 我们就可以得到a (1-k*k)/(k*k1);b 2k/(k*k1);c 2k/(k*k1);d (k*k-1)/(k*k1); 也就是上面matrix方法中的参数值啦 下图为自己计算的草稿 八、3D变换中的矩阵 3D变换虽然只比2D多了一个D但是复杂程度不只多了一个。从二维到三维是从4到9而在矩阵里头是从3*3变成4*4, 9到16了。 其实本质上很多东西都与2D一致的只是复杂度不一样而已。这里就举一个简单的3D缩放变换的例子。 对于3D缩放效果其矩阵如下 代码表示就是 transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1) 您可以狠狠地点击这里matrix3d下的3D比例变换demo 九、结束语 想了想没什么要唠叨的。文中观点若是存在疑问或不准确的欢迎指正。感谢阅读 参考文章Understanding the CSS Transforms MatrixCSS3前端开发中需要用到的变换矩阵 原创文章转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址http://www.zhangxinxu.com/wordpress/?p2427 转载于:https://blog.51cto.com/guangningchen/1034604
