随手记——css3 2D转换（transform）

css3 2D转换（transform）

位移（translate）

旋转（rotate）

转换中心点（transform-origin）

缩放（scale）

2D转换综合写法

正文 __start：

位移（translate）

语法	说明
transform:translate(x,y)	元素在x轴移动x像素，y轴移动y像素
transform:translateX(n)	元素在x轴移动n像素
transform:translateY(n)	元素在y轴移动n像素

注：
X和Y代表的二维坐标；
里面的参数可用百分比，也可用像素；
参数用百分比时，移动的距离是利用盒子自身宽度或者高度来对比的；
translate最大的优点：不会影响到其他元素的位置；
对行内标签没有效果（如：a、span、em、strong等）；
可以利用translate（-50%，-50%），来使盒子垂直居中；

旋转（rotate）

语法	说明
transform:rotate(45deg)	元素在二维平面内顺时针旋转45度

注：
度数：正值为顺时针转，负值为逆时针转；
默认旋转中心为元素的中心点；

过渡（transition）

 当我们做动画效果时，想更清楚的看到动画效果，就在本身添加transition

语法	说明
transition-propery:	设置过渡效果的css属性名称
transition-duration:	规定完成过渡效果需要完成要多少秒（s）或毫秒（ms）
transition-time-function:	规定速度效果的速度曲线
transition-delay：	定义过渡效果合适开始

注：
过渡写到本身上，谁做动画给谁加；
合写：transition：property duration time-function delay；
过渡效果属性名和完成效果需要的时间必写；

转换中心点（transform-origin）

 设置转换中心点

语法	说明
transform-origin:top right;	转换中心为元素右上角

注：
后面的参数用空格隔开；
x y 默认转换中心点是元素的中心点（50% 50%）；
transform-origin:x y；
x y可以是像素或者方位名词（top bottom left right）；
transform-origin:50px 50px；中心点是50px的x与50px的y的交界点；

缩放（scale）

 对元素进行缩放

语法	说明
transform:scale（x ，y）;

注：
后面的参数是数字，倍数的意思 1是1倍 2就是2倍；
参数小于1就是缩小，参数大于1就是放大；
scale缩放不会影响其他盒子的位置；
图片放大案例；
修改宽度为原来2倍，高度不变：transform:scale（2 ，1）;
等比例放大为原来的2倍：transform:scale（2）;

2D转换综合写法（transform）

同时进行多个转换

语法：
transform：translate（） rotate（） scale（）…

注：
当同时又位移又有其他属性时，将位移放在最前面；