兼容性 : 
     IE9+ : -ms-transform :  IE9只支持2D转换 
     firefox , chrom , opera : 支持3D转换 
 
写法 : 
     div {
          -moz-transform : rotate(10deg);
    transform : rotate(10deg);
    -ms-transform : rotate(10deg);
  }
 
p.s : transform中多个属性可以同时使用,如:
     
 

rotate属性 : 平面旋转多少角度

1、使用方法 : transform : rotate(10deg);
 demo : 
          
 

skew属性 :倾斜多少角度

1、使用方法 : transform : skew(10deg);

2、demo  :

      html : <div class="transform transform2">transform</div>
      css   :-webkit-transform : skew(20deg)
      结果 : 
             
 

scale属性 :放大多少倍(括号里面填写的是倍数)

1、使用方法 : transform : scale(11.5);

2、demo  :

      html : <div class="transform transform2">transform</div>
      css   :-webkit-transform : scale(1.5)
   结果 : 
                
 

matrix属性 :矩阵方式进行变换

1、使用方法 : transform :matrix(2,0,0,2,0,0);

2、demo  :

      html : <div class="transform transform2">transform</div>
      css   :-webkit-transform :matrix(2,0,0,2,0,0); matrix( a , b, c, d , e, f)
  兼容性 : 
    firefox下e, f除了0值之外必须只用长度单位值(“px”,“em”等)或者使用百分数
        webkit和opera下tx, ty的值不加单位或者百分数,他们就是一个数值,默认单位是px;
     结果 : 
                
 
 
 
transfrom属性里面的skew、rotate、scale 等属性跟matrix的关系是 : 
  
也就是说,倾斜,缩放,旋转,位移都是基于matrix来实现的
下面举个例子 : 
     e.g :-webkit-transform : scale(1.5); //放大1.5倍
              对应的矩阵为 -webkit-transform : martix( 1.5 , 0 , 0 , 1.5 , 0 , 0 )
  
下面介绍矩阵的原理 :
1、martix的六个参数分别对应一下的abcdef
   
2、矩阵相乘,计算每一个点的坐标,假设每一个点的坐标是 : x, y,两个矩阵相乘得到后面的结果。后面的结果就是对应着这个点A(x,y)经过变换后的位置( ax + cy+ e , bx + dy + f , 1 ) //最后的1是代表z轴都是1,代表在2D上进行转换
回到前面的缩放1.5陪的例子,就是将每一个点的x,y扩大1.5倍
x : ax + cy + e = 1.5x  意思就是 c , e 为0
y : bx + dy + f = 1.5y  意思就是 b , f 为0
 
平移,倾斜都是来自这个原理,所以如果一个matrix与其他属性一起用可能达不到你想要的效果

相关博客来源 :

  http://blog.csdn.net/henren555/article/details/9699449

   http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

css3 transfrom使用以及其martix(矩阵)属性与其它属性的关系的更多相关文章

  1. css3——transition属性和opacity属性

    [transition-duration] 是一个css3属性,规定完成过度效果需要花费的时间(一秒或毫秒计).语法:transition-duration: time;time :    规定完成过 ...

  2. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  3. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  4. css 02-CSS属性:背景属性

    02-CSS属性:背景属性 #background 的常见背景属性 css2.1 中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff; 设置元素的背景 ...

  5. CSS简介,基础选择器,字体属性,文本属性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  6. APUE学习之多线程编程(三):线程属性、同步属性

    一.线程属性      可以使用pthread_attr_t结构修改线程默认属性,并这些属性和创建的线程练习起来,可以使用pthread_att_init函数初始化pthread_attr_t结构,调 ...

  7. Struts2 配置文件result的name属性和type属性

    Struts2 配置文件result的name属性和type属性:Name属性SUCCESS:Action正确的执行完成,返回相应的视图,success是 name属性的默认值: NONE:表示Act ...

  8. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  9. [原创]java WEB学习笔记98:Spring学习---Spring Bean配置及相关细节:如何在配置bean,Spring容器(BeanFactory,ApplicationContext),如何获取bean,属性赋值(属性注入,构造器注入),配置bean细节(字面值,包含特殊字符,引用bean,null值,集合属性list map propert),util 和p 命名空间

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

随机推荐

  1. nutch-2.2.1 hadoop-1.2.1 hbase-0.92.1 集群部署

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...

  2. CSS Layout

    fontline-heightcolormarginpaddingbordertext-alignbackground widthheightfloatcleardisplay 定位属性 属 性 描 ...

  3. java 正则表达式学习

    一. Java正则表达式 在程序开发中,难免会遇到需要匹配.查找.替换.判断字符串的情况发生,而这些情况有时又比较复杂. 因此,学习及使用正则表达式,便成了解决这一矛盾的主要手段. 正则表达式是一种可 ...

  4. MiinCMP1.0 SAE 新浪云版公布, 开源企业站点系统

    MiinCMP是一款开源企业站点系统,除可执行于256M左右100元的国内IDC外,JUULUU聚龙软件团队最近开发了面向新浪云的版本号,该版本号可将站点免费布署到新浪云SAE上.MiinCMP採用j ...

  5. javascript优化

    javaScript是一门解释性的语言.它不像java.C#等程序设计语言.由编译器先进行编译再运行.而是直接下载到用户的客户端进行执行.因此代码本身的优劣就直接决定了代码下载的速度以及执行的效率. ...

  6. 从零开始学android开发-项目打包发布

    右键项目 选择[android tools]-[export signed application package] 点击[next] 如果没有keystore可以选择[create new keys ...

  7. c#winform使用WebBrowser 大全[超长文转载]

    1.主要用途:使用户可以在窗体中导航网页. 2.注意:WebBrowser 控件会占用大量资源.使用完该控件后一定要调用 Dispose 方法,以便确保及时释放所有资源.必须在附加事件的同一线程上调用 ...

  8. TP复习14

    ## ThinkPHP 3.1.2 控制器的模块和操作#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:一.空模块和空操作 1.空操作 function _ ...

  9. Using UTL_DBWS to Make a Database 11g Callout to a Document Style Web Service

    In this Document   _afrLoop=100180147230187&id=841183.1&displayIndex=2&_afrWindowMode=0& ...

  10. javascript 拷贝

    拷贝简单分为浅拷贝与深度拷贝,即给定一个对象,生成一个相同的对象. 浅拷贝 function copy(source,destiny){ destiny = destiny || {}; if(typ ...