transform基本转换应用2D
来源:互联网 发布:古生物学与地层学知乎 编辑:程序博客网 时间:2024/06/01 23:06
最近在折腾transform,其实不想写啥的,但看在忙活的一天多的份上就简单写一下额。(PS:只作为记录,语言表达能力有限)。
transform常用的几个值:translate 偏移 scale 缩放 skew 拉伸/倾斜 rotate 旋转 (PS:这几个值都比较好理解,只要记得用到的坐标轴Y轴是向下的)
真正浪费我时间的是matrix 矩阵 矩阵是个数学中的概念,很简单,不了解的可以先学一下,至于怎么实现的用matrix完成上面值的效果我就不说了,(PS:要想知道为
什么,欢迎大家去张鑫旭的博客看看)我就只说下最后的结果。
(PS:以下结果成立的条件,用到坐标轴Y轴向下,即与直接使用上面四个值一样)
matrix(A,B,C,D,E,F)六个参数中,第一个和第四个(A,D)控制(XY值no匡高)scale缩放,栗子(省略transform)matrix(2,0,0,2,0,0)与scale(2,2)效果一样
第二个和第三个(B,C)控制skew拉伸,不过B代表Y轴角度的tan值,C代表X轴角度的tan值,栗子 matrix(1,1.7,1.7,1,0,0)与skew(60deg,60deg)效果一样
(1.7为tan60的约值)
第五个和第六个(E,F)代表(X,Y)的translate位移值,栗子 matrix(1,0,0,1,30,50)与translate(30px,50px)效果一样
rotate旋转要单独写出来前四个值(A,B,C,D)分别是旋转角度的(cos,sin,-sin,cos)值,matrix中值不用单位。这个与上面算法一样就不算值了
阅读全文
1 0
- transform基本转换应用2D
- css3的transform 2D 转换
- CSS3 2D和3D转换 Transform
- CSS3 2D和3D转换(transform)
- 3D转换(transform)
- css3 transform 2D转换(动画系列一)
- 7:---(1)2D转换 (transform)-旋转
- css3之2d转换(transform方法)
- <<web>>2D,transform
- CSS布局--transform应用(矩形旋转、缩放、倾斜、滚动、3D转换)代码
- CSS变形transform(2d)
- 基本3D变换之World Transform, View Transform and Projection Transform
- 基本3D变换之World Transform, View Transform and Projection Transform
- 基本3D变换之World Transform, View Transform and Projection Transform
- HTML5学习笔记—CSS3 transform转换属性(2D/3Dtransform方法)
- CSS3属性之transform 矩阵转换深入讨论(2D)
- 2D Gabor Transform Based on OpenCV
- CSS3 2D Transform 详细讲解
- Android 头像修改
- 1089: 杨辉三角
- 有用的性能指标
- java
- 1090: 螺旋方阵
- transform基本转换应用2D
- 数据结构-栈
- Spring10---spring整合JDBC_02_基于RowMapper的查询
- 19:简单计算器
- mysql客户端操作需要显示或输入中文时出现乱码——解决办法
- 模拟退火算法(c++实现)
- 1096: 约瑟夫问题
- 使用原生js写一个日期的倒计时
- web安全的关键点