CSS3-Transform_html/css_WEB-ITnose

Transform-变形

CSS3 2D Transform

translate() //移动rotate() //旋转scale() //缩放skew()  //扭曲matrix()  //矩阵变形

translate() 移动：将HTML元素在x-y轴平面上做位移，且不会影响到其他元素

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

translateX(x)仅水平方向移动（X轴移动）

translateY(y)仅垂直方向移动（Y轴移动）

例：

-webkit-transform: translate(20px,20px); /*Webkit内核浏览器：Safari and Chrome*/-moz-transform: translate(20px,20px);  /*Mozilla内核浏览器*/-o-transform: translate(20px,20px);  /*Opera*/-ms-transform:translate(20px,20px);  /*IE9*/transform: translate(20px,20px);  /*W3C标准*/

rotate() 旋转

需先有transform-origin属性的定义。transform-origin定义的是旋转的基点

如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。

如：

transform:rotate(30deg)；

scale() 缩放

scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

scaleX(x)元素仅水平方向缩放（X轴缩放）

scaleY(y)元素仅垂直方向缩放（Y轴缩放)

但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置

缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小

如：

transform:scale(1.5,1.3)

 skew() 扭曲，斜切变换

skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）

skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）

skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

如：

transform:skewX(30deg)

 

transform:skewY（10deg）

matrix() 矩阵变形

transform: matrix(a,b,c,d,tx,ty);

本质上scale、skew、rotate、translate的效果都是通过matrix实现的，tx、ty表示位移量，matrix方法更详细的介绍可以参考这里：理解CSS3 transform中的Matrix(矩阵)

改变元素基点transform-origin

transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px

其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom

支持transform浏览器

IE9以下不支持

 

CSS3 3D Transform

3D Transform，与2D Transform相比，它给HTML元素在x-y平面加上了z轴；

translate3d(tx,ty,tz)：他定义了一个3D的位移方法，增加了z轴的偏移量translateZ(tz)：这个方法只在Z轴偏移，与translateX()和translateY()相似scale3d(sx,sy,sz)：在原有的scale方法上增加了z轴的参数scaleZ(sz)：同理，只放大z轴，与scaleX()和scaleY()类似rotate3d(rx,ry,rz)：将元素以给定参数的某一个轴方向旋转rotateX(angle)，rotateY(angle)和rotateZ(angle)：只按照某一个轴旋转，rotate3d(1,0,0,30deg)相当于rotateX(30deg)，其他类推。

激活元素的3D空间，需要perspective属性，写法有两种：

transform: perspective( 600px );perspective: 600px;

写法 transform:perspective(600px) 适用于单个元素，会对每一个元素做3D视图的变换

而 perspective:600px 的写法，需写在父元素上，然后以父元素的视角，对多个子元素进行3D变换，多个子元素共享同一个3D空间

perspective的参数值，决定了3D效果的强烈程度，可以想象为距离多远去观察元素。值越大，观察距离就越远，同样的旋转值，看起来效果就弱一些；值越小，距离越近，3D效果就更强烈。

perspective-orgin

同样，对一个元素进行3D变换的时候，变换点都是元素的中心点，如果你想以其他的位置为变换点，那就可以用这个属性来做调整；

transform-style

这个参数用来共享父元素的3D空间；

transform-style有两个值，一个是默认的flat；一个是preserve-3d

backface-visibility

backface-visibility 属性可用于隐藏内容的背面。默认情况下，背面可见，这意味着即使在翻转后，变换的内容仍然可见。但当 backface-visibility 设置为 hidden 时，旋转后内容将隐藏，确保只有正面可见；

CSS3 3D Transform 理解详见：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

参考资料：

http://www.w3cplus.com/content/css3-transform

http://beiyuu.com/css3-animation/

http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/