无意中翻看博客发现这个属性,就顺便熟悉了一下,百度了一下和查看了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. C#遍历系统所安装的打印机,使用WMI方式获取打印机的所有属性

    有网友发消息来询问,C#如何遍历系统已经安装的所有打印机,并获得每个打印机的相关信息,如:端口,名称等等 C#里面,虽然在 System.Drawing.Printing 这个namespace下,提 ...

  2. 报错:对一个或多个实体的验证失败。有关详细信息,请参阅“EntityValidationErrors”属性

    当使用Entity Framework,并且把领域模型的某个字段设置成不能为null,但在保存.更新的时候,如果领域模型的该字段为null了,就会报如上错误. 解决方法:给领域模型不能为null的字段 ...

  3. 点集转线python最优代码

    import arcpy import os import types def convertPoints(): arcpy.env.overwriteOutput = True inPts = ar ...

  4. LDAP 总结

    LDAP入门 首先要先理解什么是LDAP,当时我看了很多解释,也是云里雾里,弄不清楚.在这里给大家稍微捋一捋. 首先LDAP是一种通讯协议,LDAP支持TCP/IP.协议就是标准,并且是抽象的.在这套 ...

  5. pandas过滤包含特定字符串的行

    ~df.col3.str.contains('u|z')也就是在条件前面加~号,表示not

  6. OpenCV特征检测教程

    http://docs.opencv.org/2.4/doc/tutorials/features2d/table_of_content_features2d/table_of_content_fea ...

  7. 3D屏保:N皇后

    前几天园子里有人发表关于8皇后的算法.只有代码,没有能运行的DEMO多枯燥.于是我这两天抽时间写了个N皇后的屏保程序.程序启动后会从4皇后到14皇后显示其所有排列,每隔0.5秒自动切换一次.按下空格键 ...

  8. go语言基础之不要操作没有合法指向的内存

    1.不要操作没有合法指向的内存 示例: package main //必须有个main包 import "fmt" func main() { //没有指向内存 var p *in ...

  9. OkHttp 官方Wiki【设计思想】

    官方Wiki之Calls 原文位置:https://github.com/square/okhttp/wiki/Calls The HTTP client's job is to accept you ...

  10. Windows服务器PHPstudy配置安装微擎教程

    此教程只适于无环境的新服务器,有环境请勿安装用电脑上面的远程桌面连接登陆服务器.1,下载微擎安装包,下载PHPstudy,下载V9运行库.安装PHPstudy.安装V9运行库.准备好3个. <i ...