时间:2021-07-01 10:21:17 帮助过:4人阅读
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/