CSS3--transform
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的更多相关文章
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- 小心 CSS3 Transform 引起的 z-index "失效"
https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...
- CSS3 transform rotate(旋转)锯齿的解决办法
-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...
- 理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...
- CSS3 transform对普通元素的N多渲染影响
一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...
- CSS3 transform 属性
CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...
- 基于css3 transform实现散乱的照片排列
分享一款基于css3 transform实现散乱的照片排列.这是一款简单零散的css3相册排列特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class= ...
- 理解CSS3 transform中的Matrix(矩阵)——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...
- CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...
- CSS3 transform rotate(旋转)锯齿/元素抖动模糊的解决办法
使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果.只要在CSS3 transform属性中加入translateZ(0).例:-webkit-transform: r ...
随机推荐
- 指令的Link函数和Scope
指令生成出的模板其实没有太多意义,除非它在特定的scope下编译.默认情况下,指令并不会创建新的子scope.更多的,它使用父scope.也就是说,如果指令存在于一个controller下,它就会使用 ...
- IISExpress 调试使用学习,使用附加到进程进行快速调试
IIS8.0 Express已经推出了,大家可以通过Microsoft Web Platform Installer 进行安装.(VS2012,VS2013已经内置了,不需安装了) 1.IIS Exp ...
- Android学习计划
书目 疯狂Android讲义 Android开发艺术探索 Android群英传 Android 源码设计模式解析与实战 Android内核剖析 深入理解 Android自动化测试 代码 信念 坚持.坚 ...
- 响应式编程 Part.01 (Layout and MVVM)
内部技术交流会PPT Keywords Less Requirejs Mvvm Bootstrap kendo 下载完整PPT
- lua 学习 (一 )Mac搭建lua环境和ide
今天开始学习lua 首先是搭建环境 和 我的hello world 首先 交代一下我用的是 Mac 系统 所以在Mac上安装lua 环境很方便的 lua Mointain Lion - Lua 5 ...
- 深度系统deepin使用初体验
最近使用linux系统比较多,因为很多项目要用到,而且厌烦了windows流氓软件各种广告的繁琐,因此决定在自己的本子上安装linux系统.然后了解到了deepin操作系统,竟然是武汉一个公司发行的版 ...
- 制作QQ空间的一些想法
新的项目开始了,这一次是做一个网站类似于QQ空间那样的,基本功能比如说写日志,说说之类的都要有(说说是要有楼中楼嵌套的,应该能够上传图片),还要可以修改个人信息.登录注册之类的更不用说了,还要有一定的 ...
- OC-《购票系统》
来个命令行的购票系统 --1-- 需求分析 1.1 分析 1.2 功能分析 1.3 流程分析 --2-- 原型展示 2.1 界面原型 --3-- 系统设计 3.1 类设计 3.2 框架模块设计 --4 ...
- IIS报错:Exception from HRESULT: 0x8007000B解决方法
报错如下: System.Web.Services.dll 中发生,但未在用户代码中进行处理 其他信息: 服务器无法处理请求. ---> 尝试加载 Oracle 客户端库时引发 BadImage ...
- easyui from 缓存问题处理
1 这是ie低版本,缓存了easyui form load事件获取的服务器端数据,给ajax时间加上清除缓存就ok. 找到easyui 中的form load事件 添加cache:false, /* ...