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()…
注:
当同时又位移又有其他属性时,将位移放在最前面;