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. Web 2D/3d

    首选应该是H5,通过现成的js库来实现,兼容性应该不错 其次可以考虑使用Unity3d,开发起来应该比较快 搜集点资料先放起来~ Unity3d: http://unity3d.com/cn/get- ...

  2. ASP DropDownList部分选项无法触发回传问题

    今天偶然碰到这个问题,一个通过后台绑定的DropDownList控件出现部分选项触发事件,部分选项不触发事件的问题: 原因是多个OPTION的Value值一致,导致ASP事件注册失败,只要在绑定过程中 ...

  3. [译]Dynamics AX 2012 R2 BI系列-分析的架构

    https://msdn.microsoft.com/EN-US/library/dd309691.aspx     下图显示了包含在AX中的SSAS Cube,和用于访问他们的组件.     下面的 ...

  4. selenium测试(Java)--多窗口切换(十三)

    selenium测试(Java)--多窗口切换(十三) 如果遇到点击按钮或链接后出现新窗口的情况,就需要使用窗口切换的方法. 本例中就是先打开百度搜索界面,然后利用js打开一个百度新闻界面,然后通过s ...

  5. Codefroces 750D:New Year and Fireworks(BFS)

    http://codeforces.com/contest/750/problem/D 题意:烟花会绽放n次,每次会向前推进t[i]格,每次绽放会向左右45°绽放,问有烟花的格子数. 思路:n = 3 ...

  6. oracle迁移postgres之-oracle_fdw

    1. 安装oracle_fdw 在编译安装前,需要设置postgres的环境变量,如在.bash_profile中增加: export ORACLE_HOME=/u01/app/oracle expo ...

  7. 逗比的wifi开关

    笔记本会出现网卡开机不能用的现象.具体表现为:网卡没有禁用,但是搜索不到无线信号.适配器选项框里面选中无线网卡,然后诊断这个链接提示启用无线功能.然后我点击应用此修复就能搜索到无线信号了.问题是,电脑 ...

  8. 每天一点Android干货-时间与日期、进度条

    时间控件TimePicker的使用方法 timePicker.setIs24HourView(true); //设置是否以24小时制显示 timePicker.getCurrentHour(); // ...

  9. 我理解的webservice是这样的

    本文来自 --迹忆:http://www.onmpw.com/tm/xwzj/network_45.html 最近在工作中遇到这样的一个项目(暂且定为项目A),项目A本身是用PHP开发的,但是其数据是 ...

  10. ZooKeeper测试笔记

    1. 下载ZooKeeper.官网:http://zookeeper.apache.org 下载后解压,假定zookeeper程序目录为/home/test/zookeeper,为陈述方便此目录记为 ...