一、transform变换
可做拉伸、压缩、旋转、偏移的效果。需加各个浏览器前缀。
二、transform-origin
为transform属性值的基点,默认值为元素的中心位置,即以元素左上角为坐标轴原点,向右为x轴,向下为y轴,基点为(50%,50%)。
1. transform-origin:x y z;
1)x轴 取值:left/center/right/length/%
百分比换算:
left-------------0%
center----------50%
right------------100%
2)y轴 取值:top/center/bottom/length/%
百分比换算:
top--------------0%
center----------50%
right------------100%
3)z轴 取值:length
2D默认为0,3D效果设置。
三、transform的属性值
1.旋转 rotate(deg)
通过指定的角度参数对元素以基点进行2D旋转。单位为deg。
2.移动 translate(x,y)
始终相对于元素中心偏移。单位为px。
translateX(x);水平方向上的偏移量
translateY(y);垂直方向上的偏移量
3.缩放 scale(x,y)
当值=1为原大小;值>1为放大;值<1为缩小。单位无。
scaleX(x);水平方向上的缩放
scaleY(y);垂直方向上的缩放
4.倾斜 skew(x,y)
给选定的元素进行以基点为中心的倾斜。单位为deg。
skewX(x);水平方向上的倾斜
skewY(y);垂直方向上的倾斜
5.矩阵 matrix(rotateX,rotateY,rotate3D,translateZ,translate3D,scaleZ,scale3D)
矩阵一共有6个参数。