CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换。2D变换矩阵为3*3, 如上面矩阵示意图;3D变换则是4*4的矩阵。

 
transform 里面的:斜拉(skew),缩放(scale),旋转(rotate)以及位移(translate)。本质上就是通过matrix实现的快捷方法(注意:translaterotate等方法都是需要单位的,而matrix方法e, f参数的单位可以省略。)
 
transform-origin: 50px 70px; (向左移50,向上移70)代表的是transform的中心点(也就是下面的x, y)
 
开始:
transform: matrix(a,b,c,d,e,f);
(a表示缩放x轴,b和c影响拉伸,d表示缩放y轴,e水平偏移距离,f垂直偏移距离)
实际上,这6参数,对应的矩阵就是:
 
矩阵计算:
ax+cy+e,是由3*3矩阵每一行的第1个值与后面1*3的第1个值相乘,第2个值与第2个相乘,第3个与第3个,然后相加。ax+cy+e为变换后的水平坐标,bx+dy+f表示变换后的垂直位置。
 
举例:
transform: matrix(1, 0, 0, 1, 30, 30);   /* a=1, b=0, c=0, d=1, e=30, f=30 */
假设元素中心点为: x = 0;  y = 0;
变换后的x坐标就是ax+cy+e = 1*0+0*0+30 =30, y坐标就是bx+dy+f = 0*0+1*0+30 =30
也就是元素从(0, 0)  移动到右下方 (30, 30)(等同于transform: translate(30px, 30px);)
 
 
 
 
 

Matrix 矩阵的更多相关文章

  1. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  2. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  3. HDU5015 233 Matrix(矩阵高速幂)

    HDU5015 233 Matrix(矩阵高速幂) 题目链接 题目大意: 给出n∗m矩阵,给出第一行a01, a02, a03 ...a0m (各自是233, 2333, 23333...), 再给定 ...

  4. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

  5. String数据转Matrix矩阵

    String数据转Matrix矩阵 private Matrix String_To_Matrix(string str) { int[] Remove_Num = new int[10]; int ...

  6. Leetcode 566. Reshape the Matrix 矩阵变形(数组,模拟,矩阵操作)

    Leetcode 566. Reshape the Matrix 矩阵变形(数组,模拟,矩阵操作) 题目描述 在MATLAB中,reshape是一个非常有用的函数,它可以将矩阵变为另一种形状且保持数据 ...

  7. Android中的Matrix(矩阵)

    写在前面 看这篇笔记之前先看一下参考文章,这篇笔记没有系统的讲述矩阵和代码的东西,参考文章写的也有错误的地方,要辨证的看. 如何计算矩阵乘法 android matrix 最全方法详解与进阶(完整篇) ...

  8. 汉高澳大利亚matrix矩阵计算器

    我在梦中的超级计算机超级计算机锯,使用大量阵列的cpu记忆,完成并行计算.一个手机制造商由于使用普通机械提供的服务,往往造成停机.是铁道部列车网络售票的事实. 无法使用云服务.上万台计算机并行处理,因 ...

  9. 前端matrix矩阵的变化

    css3 transform中的matrix矩阵   CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform), ...

  10. css3 transform中的matrix矩阵

    CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示 ...

随机推荐

  1. uvalive 3029 City Game

    https://vjudge.net/problem/UVALive-3029 题意: 给出一个只含有F和R字母的矩阵,求出全部为F的面积最大的矩阵并且输出它的面积乘以3. 思路: 求面积最大的子矩阵 ...

  2. 每周分享之 二 http协议(3)

    本次分享http协议,共分为三部分,这是第三部分,主要讲解一个完整的http请求都经过哪些步骤,当我们在地址栏中输入网址,到返回页面都经历了什么 1.输入网址 当我们在浏览器中输入网址的时候,浏览器就 ...

  3. 1523. K-inversions URAL 求k逆序对,,,,DP加树状数组

    1523. K-inversions Time limit: 1.0 secondMemory limit: 64 MB Consider a permutation a1, a2, …, an (a ...

  4. 【归纳整理】Ajax / JSON / WEB存储 / iframe

      Ajax 一.什么是 AJAX ? AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种用于创建快速动态网页 ...

  5. mysql error 1290 hy000:The MySQL server is running with the --skip-grant-tables option so it cannot execute this statemen' 解决方案

    如果在执行授权命令的时候报错 mysql> grant all privileges on *.* to root@"; ERROR (HY000): The MySQL server ...

  6. vue2+webpack使用1--初识默认展示页面

    1 从安装好的展示 vue2+webpack项目开始 2 关键目录及文件 3 关系图 4 类比nodejs项目的理解   // src/main.js import Vue from 'vue' // ...

  7. tomcat 内存大小配置

    Tomcat本身不能直接在计算机上运行,需要依赖于硬件基础之上的操作系统和一个java虚拟机.JAVA程序启动时JVM都会分配一个初始内存和最大内存给这个应用程序.这个初始内存和最大内存在一定程度都会 ...

  8. 简单的CSS颜色查看工具

    可以通过输入ARGB(A代表透明度)格式或者HEX格式查看颜色,也可以进行ARGB格式和者HEX格式转换,如下图 使用C#编写,我已将源代码压缩上传 下载地址:http://files.cnblogs ...

  9. c#接口和抽象类比较

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  10. 构造函数,This关键字

    构造函数: 即构建创造对象时调用的函数.在new的时候自动执行,给对象进行初始化.创建对象都必须要通过构造函数初始化.(有参和无参) 一个类中如果没有定义过构造函数,那么类中会有一个默认的空参数构造函 ...