CSS3学习笔记--transform中的Matrix(矩阵)
transform: matrix(a,b,c,d,e,f) ,如下图矩阵所示,任意点(x,y,1)经过matrix变化为(ax+cy+e,bx+dy+f,1),由此可以知道,
matrix参数与translate/scale/skew/rotate函数参数的对应关系为:
translate(tx,ty) | matrix(1,0,0,1,tx,ty) |
scale(sx,sy) | matrix(sx,0,0,sy,0,0) |
skew(sx,sy) | matrix(1,tansy,tansx,1,0,0) |
rotate(rx) | matrix(cosrx,sinrx,-sinrx,cosrx,0,0) |
aaarticlea/png;base64,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" alt="" />
CSS3学习笔记--transform中的Matrix(矩阵)的更多相关文章
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- 理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...
- 理解CSS3 transform中的Matrix(矩阵)——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...
- css3 transform中的matrix矩阵
CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示 ...
- CSS3学习笔记--transform基于原始数据(旋转木马实例)
参考链接:好吧,CSS3 3D transform变换,不过如此! transform-style:preserve-3d属性要在图片所在的容器(父元素)中定义,perspective定义在父子元素上 ...
- Android学习笔记进阶八之Matrix矩阵
Matrix,中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放.平移.旋转等操作. 在Android里面,Matrix由9个float值构成,是一个3*3的矩阵.最好记住.如下图: ...
- CSS3 学习笔记(中)
七.文档流 文档流(normal flow)--网页的基础(最底下的一层),我们所创建的元素默认都是在文档流中进行排列. 对于元素有两个状态:在文档流 或 脱离文档流. 元素在文档流的特点: 块元素: ...
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- ArcGIS案例学习笔记-点集中最近点对和最远点对
ArcGIS案例学习笔记-点集中最近点对和最远点对 联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 目的:对于点图层,查找最近的点对和最远的点对 数据: 方法: 1. ...
随机推荐
- .Net中的Debug模式和Release模式
1.Debug模式和Release模式 在vs中,运行程序有两种模式:Debug和Release 在bin目录下也会生成对应的文件夹,用于存放生成的dll等文件,这两种模式的区别如下: Debug:用 ...
- 学习angular 指令构造器时遇到的小问题
在学习angular时,使用模块来为应用添加自己的指令时,遇到了一个问题,演示的代码如下: <!DOCTYPE html> <html> <head> <me ...
- Linux开启关闭redis
1.启动:redis-server(redis-server redis.conf) 2.登陆:redis-cli(redis-cli -p 6379) 3.关闭:redis-cli shutdown
- UIAlertView、 UIActionSheet
一.UIAlertView. UIActionSheet都是ios系统自带的弹出式对话框,当UIAlertView或UIActionSheet弹出来时用户无法与应用界面中的其它控件交互,UIAlert ...
- oracle 10g在redhat5下的安装
[root@localhost ~]# groupadd dba -g 111 [root@localhost ~]# groupadd oinstall -g 110 [root@localhost ...
- lnmp memcache出问题
打开另一台用0.9装好的memcache 的PHP配置文件,找到了“extension = "memcache.so" ,将这个加入到了1.0的php.ini重启后 执行/memc ...
- 【Win10】解决 模拟器调试手机 错误-> 引导阶段... 无法找到指定路径......\2052\msdbgui.dll
去弄几天的Web服务,又弄了几天的CefSharp,都是给其它组的同学做了一下支持,终于又可以回来玩下Win10啦. 今天想试一下UWP在手机上的效果,就找了台WP手机开始升级,结果下载速度遥遥无期, ...
- jeesite笔记
环境 Github上的不能初始化数据库:https://github.com/thinkgem/jeesite 官网上的可以: http://jeesite.com/ 用 Idea 打开,修改 \sr ...
- 比较任意两个JSON串是否相等(比较对象是否相等)JAVA版
废话少说,直接入题. 在面向对象语言中,经常会比较两个对象是否相等,而比较的大多是实体类实例,也就是封装数据的那些类实例,或者是Map.List互相嵌套成的复杂数据结构. 比较对象是否相等,常见的思路 ...
- 有关HTML5 Video对象的ontimeupdate事件的问题
日前在做一个视频播放的页面,其中用到了HTML5的Video对象,这个是HTML5中新增的一个对象,支持多种不同格式的视频在线播放,功能比较强大,而且还扩展了许多事件,可以通过JavaScript脚本 ...