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. Prism&MEF构建开发框架 (一)

    Shell框架XECA shell.xaml主要起到是一个容器或壳的作用 <Window x:Class="XECA.Shell"      xmlns="http ...

  2. 超级管理员登录后如果连续XX分钟没有操作再次操作需要重新登录

    首先在设置session页面时 session_start(); session("name",$adminname); //加入session时间 time() session( ...

  3. 《Haskell趣学指南 Learn You a Haskell for Great Good!》-代码实验

    doubleMe x = x + x doubleUs x y = doubleMe x + doubleMe y doubleSmallNumber x = then x else x * doub ...

  4. Jquery调用webService的四种方法

    1.编写4种WebService方法 [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(Conf ...

  5. oracle 表查询一

    通过scott用户下的表来演示如何使用select语句,接下来对emp.dept.salgrade表结构进行解说. emp 雇员表字段名称   数据类型       是否为空   备注-------- ...

  6. 由单例模式学到:volatile关键字

    MSDN上说: volatile 关键字指示一个字段可以由多个同时执行的线程修改. 声明为 volatile 的字段不受编译器优化的限制. 这样可以确保该字段在任何时间呈现的都是最新的值. volat ...

  7. saltstack之(七)配置管理系统初始化init

    saltstack的配置管理分环境管理:①.base为基础环境,一般会存放一些所有服务器都使用的配置管理信息.②.dev为开发测试环境,一般会存放一些开发测试服务器使用的配置管理信息.③.pro为线上 ...

  8. UCenter uc_user_synlogin同步登陆返回值为空(NULL)的解决办法 及 ucenter原理

    第一种方法最近刚刚接触UCenter,很多问题不是很理解,只是在摸索着.尝试着做,就在刚才有解决了一个问题,虽然不知道解决问题的具体原理,但是还是实现了同步登陆.首先我是在本地测试的,也就是local ...

  9. VC++ 修改资源页面语言

    选中 资源文件,在“属性”页面中更改 “language”选项: 资源视图中: 属性 页面中:

  10. [chrome插件] 利滚利计算器 银行存款 基金理财 余额宝收益计算

    利滚利计算在数学上是否有一个简单的公式,我不知道,但作为程序员,这个算法实现起来就是小菜一碟.作为插件发布,是因为程序确实简单,也方便Chome浏览器使用者安装.如果你也想使用一下Chrome插件,参 ...