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. 低功耗蓝牙BLE [学习笔记]

    手机设备会区分 "connecting" and "pairing" ,前者可以自动连接,后者则需要请求.BLE不再有pairing的麻烦,能直接连上目标设备, ...

  2. C++简单单例模式

    #ifndef _SINGLETON_H_ #define _SINGLETON_H_ #include <stdio.h> template<typename T> clas ...

  3. Window上装PHP开发环境 (XAMPP)

    原作者:http://www.cnblogs.com/martin1009/archive/2011/11/11/2245794.html 1. 从www.apachefriends.org 上下载X ...

  4. php--yii2.0框架的curl

    yii2.0框架的增删改查 //插入操作  save() $customer=new Customer(); $customer->name=‘小熊‘; $customer->save() ...

  5. caption,为表格增加标题和摘要

    格式: <table summary="***"> <caption>***</caption> <tr> </tr> ...

  6. table 操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. Aptana快捷键(方便查询)

    窗口类:Ctrl+ Shift +L 调出快捷键提示Ctrl+ W 关闭当前标签窗口Ctrl+ Shift + W 关闭当前标签窗口Ctrl+ F6 (或者是Aptana的Ctrl+Tab )下一个编 ...

  8. 使用shell测试cdn状态

    公司使用多家cdn,测试cdn在各个地方的响应情况,以便于提高视频访问的用户体验.分别在阿里云华南1,华东1,华东2,华北2等不同地区节点测试.该随笔为自己所用.   1.该脚本会测试某一cdn的ur ...

  9. Ubuntu14.04安装和配置Tomcat8.0.12(转)

    Ubuntu14.04长的好看,所以一时间很感兴趣,研究各种软件的安装和开发环境的配置.今天先把安装的tomcat 8.0.12的教程分享给大家.如果你需要,请收藏!!!   工具/原料 系统环境:U ...

  10. MVC项目实践,在三层架构下实现SportsStore-08,部署到IIS服务器

    SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...