CSS3 2D和3D转换 Transform

Transform 适应于对任一DOM元素的2D或3D转换,这些转换效果有:旋转(rotate)、拉伸(scale)、平移(move)、倾斜(skew)等，利用Transform和javascript可以制作一些简单的动画，可以为web应用带来些意想不到的效果。

目前浏览器并不是完全支持所有的Transform ，IE9、Firefox 和Opera 仅支持2D transforms ，相应的CSS定义为：-ms-transform 、-moz-transform 和-o-transform ，而Safari 和Chrome 都支持2D和3D transforms ，相应的CSS定义为：-webkit-transform 。

下面给出一个transform定义实例：

div

{

transform:rotate(7deg);

-ms-transform:rotate(7deg); /* IE 9 */

-moz-transform:rotate(7deg); /* Firefox */

-webkit-transform:rotate(7deg); /* Safari and Chrome */

-o-transform:rotate(7deg); /* Opera */

}

<font color="#c0504d">1.1 transform</font>

语法:transform: none|<i>transform-functions</i>;

说明:

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)	定义一个3D 转换,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转换效果和透视图

1.2 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

1.3 transform-style

对于支持3D转换的浏览器，指定元素内的子元素是否进入其3D环境中。

语法：transform-style: flat|preserve-3d;

说明：

Property Value	Description
flat	子元素不参与3D转换
preserve-3d	子元素将显示在3D环境中

实例:

CSS3 2D和3D转换 Transform相关推荐

CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
CSS3之2D与3D转换
在CSS3中新增了很多关于2D和3D转换的标准,它允许将页面元素在2D和3D空间内进行移动.缩放.旋转.倾斜等.所谓的2D转换,指的是元素可以在平面内进行位置或形状的转换,而3D转换指的是元素可以在三 ...
CSS学习笔记 07、2D与3D转换
文章目录前言一.2D变形 1.1.旋转变形 transform: rotate(度数)-旋转角度,默认中心点旋转 transform-origin属性(定义旋转点) 1.2.缩放变形 transf ...
论文翻译——Rapid 2D-to-3D conversion——快速2D到3D转换
目前想做一个关于2D转3D的项目,由于国内资料比较少而且大部分都是基于国外的研究资料优化而来,所以想翻译翻译国外的论文,强化自己的理解,同时方便他人,英文水平有限,尽量做到"信达雅" ...
html52D转换3D,CSS3 Transform 2D和3D转换
1.2 缩放语法transform : scale(x,y); -webkit-transform : scale(x,y); 根据倍数来缩放,取决于宽度(X轴)和高度(Y轴)的参数:也可以用一个参 ...
css3中的2D和3D转换、动画效果以及布局
文章目录一.2D转换: 1. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动.移动参照元素左上角原点 2. 2D缩放: 3. 2D旋转: 4. 2D翻 ...
CSS3中的2D和3D转换知识介绍
一 2D转换转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 ...
2D转换和3D转换 transform
目录一.转换的概念二.2D转换 2.1 translate 2.2 scale 2.3 rotate 2.4 变形原点三.3D转换 3.1 景深 3.2 实现3d效果 3.3 3D位移 3.4 ...
CSS笔记11 2D与3D转换
2D转换 PASS:因为图片太色,所以...自行脑补吧各位~~~ 转换(transform)是CSS中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果移动:translate 旋转:rot ...

CSS3 2D和3D转换 Transform

CSS3 2D和3D转换 Transform相关推荐

最新文章

热门文章