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. nrf51822-主从通信分析2

    解决第三个问题:如何使能从机上的特征值的 notify功能,使其能通过notify方式发送数据   使能从机的notify功能是通过写0x0001到从机的那个具有notify功能的特征值的CCCD描述 ...

  2. 【Android测试】【随笔】搜狗、腾讯技术交流会心得

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5048525.html 今天没上班,一大早就起来赶去搜狐网络 ...

  3. Windows 一键安装OpenSSL

    原理:OpenSSL在github上有开源项目,我们只需要把代码克隆到本地,在本地编译一下就好了 注意事项: 1->在github上获取源码,必须要安装git for windows,网址 ht ...

  4. Delphi Memory-Mapped File简单示例

    { Copyright ?1999 by Delphi 5 Developer's Guide - Xavier Pacheco and Steve Teixeira } unit MainFrm; ...

  5. 在magento中如何回复客户的评论

    magento — 在magento中如何回复客户的评论 发表于 2012 年 8 月 18 日 agento本身是不带 回复评论的功能的,现成的扩展(无论免费的还是商业的)也没找到,那就自己写一个吧 ...

  6. 根据 字数 确定 UI控件高度

    //字体 textLabel.font = [UIFont systemFontOfSize:13]; CGFloat labelWidth = [UIScreen mainScreen].bound ...

  7. 获取dom元素的宽度和高度

    一.获取css的大小 1.第一种通过内联样式 var box = document.getElementById('box'); var w = box.style.width; var h = bo ...

  8. JavaScript:window窗口对象

    在JavaScript中,window表示的就是一个窗口对象.所以在整个处理过程之中,所有的操作都是以弹框为主 的.范例1:使用警告框 <script type="text/javas ...

  9. jenkins邮件模板

    步骤 1.在jenkins主目录中新建一个模板文件夹 命名为:email-templates 3.把模板代码放入到模板文件夹  with_results.groovy 4.设置邮件发送模板配置 5.配 ...

  10. mongoose的promise(转发)

    Switching out callbacks with promises in Mongoose Published on July 28, 2015 mongo node mongoose pro ...