浅谈CSS3 Matrix 的使用

栏目: CSS3 · 发布时间: 5年前

内容简介:CSS3的光是看这名词好像有点吓人,仿佛又回想起当初被数学支配的恐惧。的确,相比那些
浅谈CSS3 Matrix 的使用

CSS3的 transform 里有一个方法叫做 Matrix ,该需要六个参数,可以使用数学函数让元素进行旋转、缩放、移动以及倾斜元素。

光是看这名词好像有点吓人,仿佛又回想起当初被数学支配的恐惧。的确,相比那些 translate(25deg) 之类有着明确语义跟容易调用方法外, Matrix 使用起来确实有些复杂~

Matrix 的参数分别有a, b, c, d, e, f六个参数,我们可以分别对应:

transform: matrix(X轴的缩放, X轴拉升, Y轴的拉伸, Y轴的缩放, X轴的位移, Y轴的位移);

这样看上去好像好多了,我们常使用的几个方法也是可以通过Matrix来实现:

元素默认情况下的表现可以用 Matrix 来表示为: matrix(1, 0, 0, 1, 0, 0) ;

通过上面的例子,我们很容易推测出缩放的公式为: translate(sx, sy) 等于 matrix(sx, 0, 0, sy, 0, 0) ;

位移就更简单啦: translate(tx, ty) 等于 matrix(1, 0, 0, 1, tx, ty) ;

拉升则是: skew(degx, degy) 等于 matrix(1, tan(degx), tan(degy), 1, 0, 0)

旋转没有提供相应的参数,他需要套用数学的公式,毕竟这个方法名就是 矩阵 嘛: rotate(deg) 等于 matrix(cos(deg),sin(deg), -sin(deg), cos(deg), 0, 0)

那问题来了,为啥有简单易用的方法不用,我们非要搞这么麻烦的东西呢?这是因为很多时候我们需要高度精确定制动画时,那些简单的方法以及不能满足我们的需求啦~


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大数据时代的算法:机器学习、人工智能及其典型实例

大数据时代的算法:机器学习、人工智能及其典型实例

刘凡平 / 电子工业出版社 / 2017-1 / 49

《大数据时代的算法:机器学习、人工智能及其典型实例》介绍在互联网行业中经常涉及的算法,包括排序算法、查找算法、资源分配算法、路径分析算法、相似度分析算法,以及与机器学习相关的算法,包括数据分类算法、聚类算法、预测与估算算法、决策算法、关联规则分析算法及推荐算法。《大数据时代的算法:机器学习、人工智能及其典型实例》涉及的相关算法均为解决实际问题中的主流算法,对于工作和学习都有实际参考意义。 《......一起来看看 《大数据时代的算法:机器学习、人工智能及其典型实例》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具