无意中翻看博客发现这个属性,就顺便熟悉了一下,百度了一下和查看了CSS3帮助文档,特整理一下

Transform 适应于对任一DOM元素的2D或3D转换,转换效果有:旋转、拉伸、平移、倾斜等。

目前浏览器并不是完全支持所有的Transform ,

IE9、               Firefox 和     Opera 仅支持2D transforms ,相应的CSS定义为:

-ms-transform 、-moz-transform 和-o-transform ,

而Safari 和Chrome 都支持2D和3D transforms ,相应的CSS定义为:

-webkit-transform

该属性的值主要有如下:

Value

Description

none

定义这不需要转换

matrix(n,n,n,n,n,n)

使用有6个值的矩阵(matrix)来定义一个 2D 转换

matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

使用有4*4的矩阵(matrix)来定义一个 3D 转换

translate(x,y)

定义一个2D 转换,x:水平位移,y:垂直位移,个人觉得和margin-left(left) 和margin-top(top)类似.

translate3d(x,y,z)

定义一个2D 转换,x:水平位移,y:垂直位移,z:Z方向的位移

translateX(x)

定义一个水平方向2D 转换

translateY(y)

定义一个垂直方向2D 转换

translateZ(z)

定义一个Z方向3D 转换

scale(x,y)

定义一个2D 拉伸, x:水平拉伸,y:垂直拉伸

scale3d(x,y,z)

义一个3D 拉伸, x:水平拉伸,y:垂直拉伸,z:Z方向的拉伸

scaleX(x)

定义一个水平方向拉伸

scaleY(y)

定义一个垂直方向拉伸

scaleZ(z)

定义一个Z方向的拉伸

rotate(angle)

定义一个 2D 旋转, angle :旋转角度(deg)

rotate3d(x,y,z,angle)

定义一个 3D 旋转,

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转换效果和透视图

transform-origin配合transform,目的是定义元素旋转的位置

语法:transform-origin: x-axis y-axis z-axis;

说明:

Property Value

Description

x-axis

定义X轴的转换位置. 可能的值有:

  • left
  • center
  • right
  • length
  • %

y-axis

定义Y轴的转换位置. 可能的值有:

  • top
  • center
  • bottom
  • length
  • %

z-axis

定义Z轴的转换位置. 可能的值有:

  • length

默认值:50% 50%,效果等同于center center

可取值的定义:

<percentage>
用百分比指定坐标值。可以为负值。可以是纯数字或者数字加百分比
<length>
用长度值指定坐标值。可以为负值。必须是数字加单位(如px)
left:
指定原点的横坐标为left
center①:
指定原点的横坐标为center
right:
指定原点的横坐标为right
top:
指定原点的纵坐标为top
center②:
指定原点的纵坐标为center
bottom:
指定原点的纵坐标为bottom

CSS3动画效果之Transform的更多相关文章

  1. 鼠标悬停css3动画效果

    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  2. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

  3. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  4. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  5. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  6. CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

  7. 第八十三节,CSS3动画效果

    CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一.动画简介     CSS3提 ...

  8. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  9. 35个让人惊讶的CSS3动画效果

    1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery  ...

随机推荐

  1. SQLite 客户端管理工具

    SQLite 客户端管理工具 SQLite Expert Personal 3.5.79.2499 下载地址:http://www.onlinedown.net/soft/117987.htm SQL ...

  2. Linux系统不可不知的命令:sudo

    转自:http://www.embeddedlinux.org.cn/html/xinshourumen/201308/05-2608.html sudo是个统管一切的命令.它的字面意思是代表“超级用 ...

  3. TIF、JPG图片手动添加地理坐标的方法

    题目:为TIF.JPG图片添加地理坐标/平面直角坐标. 图片来源:GOOGLE EARTH.(当然也可以是其他知道四角点坐标的图片) 截图工具:GEtscreen(此软件截图时可以自动生成图片四角点坐 ...

  4. no scheme 问题

    用xcode4打开xcode3建立的工程,有时候,不能自动转换版本,就会显示no scheme. 这个是由于XXX..xcodeproj包中xcuserdata文件夹中user.xcuserdatad ...

  5. 解决hue报错:timed out (code THRIFTSOCKET): None

    报错栈: [/Jun/ :: +] decorators ERROR error running <function execute at 0x7fba2804ecf8> Tracebac ...

  6. 成为Java高手的25个学习目标

    本文将告诉你学习Java需要达到的25个目标,希望能够对你的学习及找工作有所帮助.对比一下自己,你已经掌握了这25条中的多少 条了呢? 1.你需要精通面向对象分析与设计(OOA/OOD).涉及模式(G ...

  7. hdu1226 超级密码 (BFS,里面用了大数取余原理)

    Problem Description Ignatius花了一个星期的时间终于找到了传说中的宝藏,宝藏被放在一个房间里,房间的门用密码锁起来了,在门旁边的墙上有一些关于密码的提示信息: 密码是一个C进 ...

  8. Android中ActionBar及Overflow的显示

    最近在按照Android的API文档学习Android中actionbar的使用,Action bar 最基本的形式,就是为 activity 显示标题,并且在标题左边显示一个 app icon.在这 ...

  9. Jump Game II leetcode java

    题目: Given an array of non-negative integers, you are initially positioned at the first index of the ...

  10. IOS程式语法之block的使用掌握

    在现阶IOBlock 是iOS在4.0之后新增的程式语法,严格来说block的概念并不算是基础程式设计的范围,对初学者来说也不是很容易了解,但是在iOS SDK 4.0之后,block几乎出现在所有新 ...