内容简介:CSS3的光是看这名词好像有点吓人,仿佛又回想起当初被数学支配的恐惧。的确,相比那些
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)
那问题来了,为啥有简单易用的方法不用,我们非要搞这么麻烦的东西呢?这是因为很多时候我们需要高度精确定制动画时,那些简单的方法以及不能满足我们的需求啦~
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- RecyclerView使用指南(一)—— 基本使用
- 如何使用Meteorjs使用URL参数
- 使用 defer 还是不使用 defer?
- 使用 Typescript 加强 Vuex 使用体验
- [译] 何时使用 Rust?何时使用 Go?
- UDP协议的正确使用场合(谨慎使用)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
人类思维如何与互联网共同进化
[美] 约翰·布罗克曼 / 付晓光 / 浙江人民出版社 / 2017-3 / 79.90元
➢人类是否因互联网的诞生进入了公平竞争的场域? “黑天鹅事件”频频发生,我们的预测能力是否正在退化? 智人的第四阶段有哪些特征? 全球脑会使人类成为“超级英雄”吗? 虚拟现实技术会不会灭绝人类的真实体验? 还有更多不可预知答案的问题,你将在本书中找到属于自己的答案! ➢ 我们的心智正和互联网发生着永无止境的共振,人类思维会因此产生怎样的进化效应?本书编者约翰•布......一起来看看 《人类思维如何与互联网共同进化》 这本书的介绍吧!