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. 指令的Link函数和Scope

    指令生成出的模板其实没有太多意义,除非它在特定的scope下编译.默认情况下,指令并不会创建新的子scope.更多的,它使用父scope.也就是说,如果指令存在于一个controller下,它就会使用 ...

  2. IISExpress 调试使用学习,使用附加到进程进行快速调试

    IIS8.0 Express已经推出了,大家可以通过Microsoft Web Platform Installer 进行安装.(VS2012,VS2013已经内置了,不需安装了) 1.IIS Exp ...

  3. Android学习计划

    书目 疯狂Android讲义 Android开发艺术探索 Android群英传 Android 源码设计模式解析与实战 Android内核剖析 深入理解 Android自动化测试 代码 信念 坚持.坚 ...

  4. 响应式编程 Part.01 (Layout and MVVM)

    内部技术交流会PPT Keywords Less Requirejs Mvvm Bootstrap kendo 下载完整PPT

  5. lua 学习 (一 )Mac搭建lua环境和ide

    今天开始学习lua  首先是搭建环境 和 我的hello world 首先 交代一下我用的是 Mac 系统 所以在Mac上安装lua 环境很方便的 lua  Mointain Lion - Lua 5 ...

  6. 深度系统deepin使用初体验

    最近使用linux系统比较多,因为很多项目要用到,而且厌烦了windows流氓软件各种广告的繁琐,因此决定在自己的本子上安装linux系统.然后了解到了deepin操作系统,竟然是武汉一个公司发行的版 ...

  7. 制作QQ空间的一些想法

    新的项目开始了,这一次是做一个网站类似于QQ空间那样的,基本功能比如说写日志,说说之类的都要有(说说是要有楼中楼嵌套的,应该能够上传图片),还要可以修改个人信息.登录注册之类的更不用说了,还要有一定的 ...

  8. OC-《购票系统》

    来个命令行的购票系统 --1-- 需求分析 1.1 分析 1.2 功能分析 1.3 流程分析 --2-- 原型展示 2.1 界面原型 --3-- 系统设计 3.1 类设计 3.2 框架模块设计 --4 ...

  9. IIS报错:Exception from HRESULT: 0x8007000B解决方法

    报错如下: System.Web.Services.dll 中发生,但未在用户代码中进行处理 其他信息: 服务器无法处理请求. ---> 尝试加载 Oracle 客户端库时引发 BadImage ...

  10. easyui from 缓存问题处理

    1 这是ie低版本,缓存了easyui form load事件获取的服务器端数据,给ajax时间加上清除缓存就ok. 找到easyui 中的form load事件  添加cache:false, /* ...