transform:向元素应用2D或3D转换,该属性允许我们对属性旋转,缩放,移动,或倾斜。

  transfrom:none;定义不进行转换

  transfrom:matrix(n,n,n,n,n,n);定义2D转换,使用六个值的规阵

  transfrom3d:matrix(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n);定义3D转换,使用十六个值的4*4规阵

  transfrom:translate(x,y);定义2D转换。

  transfrom:translate3d(x,y,z);定义3D转换

  transfrom:translateX(x);定义转换,只是用X轴的值

  transfrom:translateY(y);定义转换,只是用Y轴的值

  transfrom:translateZ(z);定义3D转换,只是用Z轴的值

  scale(x,y);定义2D缩放转换

  scale3d(x,y);定义3D缩放转换

  scaleX(x);通过设置X轴的值来定义缩放转换

  scaleY(y);通过设置Y轴的值来定义缩放转换

  scaleZ(z);通过设置z轴的值来定义3d缩放转换

  rotate(angle);定义2D旋转,在参数总规定角度([number]deg)

  rotate3d(x,y,z,angle);定义30D旋转

  rotateX(angle);定义沿着X轴的3D旋转。

  rotateY(angle);定义沿着Y轴的3D旋转

  rotateZ(angle);定义沿着Z轴的3D旋转

  skew(x-angle,y-angle);定义沿着X和Y轴的2D倾斜旋转。

  skewX(angle);定义沿着X轴的2D倾斜转换

  skewY(angle);定义沿着Y轴的2D倾斜转换

  perspective(n);为3D转换元素定义透视视图

CSS3--transform的更多相关文章

  1. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  2. 小心 CSS3 Transform 引起的 z-index "失效"

    https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...

  3. CSS3 transform rotate(旋转)锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

  4. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  5. CSS3 transform对普通元素的N多渲染影响

    一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...

  6. CSS3 transform 属性

    CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...

  7. 基于css3 transform实现散乱的照片排列

    分享一款基于css3 transform实现散乱的照片排列.这是一款简单零散的css3相册排列特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class= ...

  8. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

  9. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

  10. CSS3 transform rotate(旋转)锯齿/元素抖动模糊的解决办法

    使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果.只要在CSS3 transform属性中加入translateZ(0).例:-webkit-transform: r ...

随机推荐

  1. 【转】sql各种查询技巧

    高级查询在数据库中用得是最频繁的,也是应用最广泛的. Ø 基本常用查询 --select select * from student;   --all 查询所有 select all sex from ...

  2. app加固

    为什么要加固APP? 答:因为黑客通过反编译APK得到源码后,会在应用中插入代码,获取利益,比如添加广告,盗取用户账号.密码,后台定制活动等.   反编译的方法? 反编译是指apk文件通过反编译工具( ...

  3. aspose words 介绍

    Aspose.Words是一个商业.NET类库,可以使得应用程序处理大量的文件任务.Aspose.Words支持Doc,Docx,RTF,HTML,OpenDocument,PDF,XPS,EPUB和 ...

  4. 写Python脚本语言时,“SyntaxError: Non-ASCII character '\xe6' in file”错误的处理

    如图是一段简单的文件操作代码,以为打开文件"test1221_1.py",若不存在此文件,则创建此文件.接下来并输出相关信息. 当少写了黄色方框圈起来的一行看似不经意的带有编码格式 ...

  5. JS_MediaPlayer类

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...

  6. linux思维导图

  7. vue 命名视图

    命名视图 有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了.你可以在界面中拥有多个单独命 ...

  8. mkforsela

    -- #!/bin/bash #sela.gao # #History: # .根据每行查找出来的结果push进去手机 #result: # :没有编译生成文件 # :没有设置编译环境 echoMsg ...

  9. FruitFrolic

    这是一个连连看小游戏,以 Unity2D 开发.因用了数种水果图片来做头像,所以游戏取名 FruitFrolic.同样,它也只是我闲时的练手. 少时曾玩过掌上游戏机里的俄罗斯方块及打飞机,及手机上的推 ...

  10. [转]DataURL与File,Blob,canvas对象之间的互相转换的Javascript

    来源 http://blog.csdn.net/cuixiping/article/details/45932793 canvas转换为dataURL (从canvas获取dataURL) var d ...