matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵,用来指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,我在这里只是简单的说一下CSS3中的transform有这么一个属性值,如果需要深入了解,需要对数学矩阵有一定的知识。

示例演示:通过matrix()函数来模拟transform中translate()位移的效果。
HTML代码:

<div class="wrapper">

<div></div>

</div>

CSS代码:

.wrapper {

width: 300px;

height: 200px;

border: 2px dotted red;

margin: 40px auto;

}

.wrapper div {

width:300px;

height: 200px;

background: orange;

-webkit-transform: matrix(1,0,0,1,50,50);

-moz-transform:matrix(1,0,0,1,50,50);

transform: matrix(1,0,0,1,50,50);

}

演示结果:

变形--矩阵 matrix()的更多相关文章

  1. numpy教程:矩阵matrix及其运算

    http://blog.csdn.net/pipisorry/article/details/48791403 numpy矩阵简介 NumPy函数库中存在两种不同的数据类型(矩阵matrix和数组ar ...

  2. 果皇的矩阵[matrix]

    #1101. 果皇的矩阵[matrix] 题目描述 输入格式 一行两个数,表示 N,M. 输出格式 一行一个数,表示答案对 10^9+7 取模后的结果 样例 样例输入 3 3 样例输出 38 数据范围 ...

  3. python小白之矩阵matrix笔记(updating)

    Matrix #python学习之矩阵matrix 2018.4.18 # -*- coding: UTF-8 -*- from numpy import * import numpy as np i ...

  4. 题解 矩阵 matrix

    矩阵 matrix Description 给出一个 n × m 的矩阵.请在其中选择至多 3 个互不相交的,大小恰为 k × k 的子矩阵,使得子矩阵的 权值和最大. Input 第一行三个整数 n ...

  5. 矩阵matrix

    矩阵matrix 1. 矩阵matrix 1.1. 定义由 m × n 个数aij排成的m行n列的数表称为m行n列的矩阵,简称m × n矩阵.记作: 这m×n 个数称为矩阵A的元素,简称为元,数aij ...

  6. 自定义View(11)**在onDraw中使用矩阵Matrix

    1.代码示例 1.1 效果 原图 : 其尺寸为162 x 251,示例中的红点是变形的锚点. 变形之后: 1.2 代码 package com.e.weixin.session.view; impor ...

  7. 矩阵 matrix

    传送门 注意这题时限是2s [问题描述] 有一个n × m的矩阵,你从左上角走到右下角,只能向下和向右走. 每个点上有一个重量v i,j 价值w i,j 的物品,你有一个容量为S的背包,经过一个点你可 ...

  8. R语言矩阵matrix函数

    矩阵是元素布置成二维矩形布局的R对象. 它们包含相同原子类型的元素.尽管我们可以创建只包含字符或只逻辑值的矩阵,但是它们没有多大用处.我们使用的是在数学计算中含有数字元素矩阵. 使用 matrix() ...

  9. 矩阵matrix变换的用法(css3属性transform: matrix)

    参数 2D矩阵的表示 matrix(a,b,c,d,e,f),其中6个参数在矩阵的分布: -- -- | a c e | | b d f | | 0 0 1 | -- -- 在CSS3中矩阵的原始值是 ...

随机推荐

  1. 移动web开发--meta 之 viewport

    常用的 viewport meta 如下: 1 <meta name="viewport" content="width=device-width,initial- ...

  2. [LeetCode]题解(python):061-Rotate list

    题目来源 https://leetcode.com/problems/rotate-list/ Given a list, rotate the list to the right by k plac ...

  3. mongoDB命令

    . getLastError db.runCommand({getLastError:}) . buildInfo //返回mongoDB的服务器版本号和操作系统类型 db.runCommand({} ...

  4. Oracle deadlock SX/SSX caused by no index on foreign key.

    Example to show the dead lock caused by lack of index on foreign key of child table. Session 1: crea ...

  5. java 中集合和数组互相转换

    package test; import java.util.Arrays;import java.util.List; /** * Created by Administrator on 2016/ ...

  6. js的语句

    1.语句类型总结 var box = 100;//单行语句 { //用花括号包含的语句集合,叫做复合语句,单位一个 //一对花括号,表示一个复合语句,处理时,可以单做一条单行语句, //复合语句,我们 ...

  7. mysql 授权 user@'%' 为什么登陆的时候localhost 不行呢???

    公司业务服务器还没迁移到阿里云上的时候,创建的一个用户明明是所有的,但是本机登陆就是不行,一直也搞不懂原因 今天才知道 原来 %不包括 localhost mysql> grant all on ...

  8. nagios监控linux主机监控内存脚本

    说明 工作包括两部分监控端(一二三)和被监控端(四) 一.nrpe.cfg中添加脚本 nrpe.cfg中添加命令索引 command[check_used_mem]=/usr/local/nagios ...

  9. HBase环境搭建

    HBase与Hadoop对应关系:http://hbase.apache.org/book.html#basic.prerequisites   4.1. Hadoop 这块介绍了对应关系 HBase ...

  10. QString 和 TCHAR 的相互转换

    参考资料: http://www.cnblogs.com/fuyanwen/p/3200536.htmlhttp://www.cnblogs.com/wendao/archive/2012/07/27 ...