css3 变换 transform(2D)

一、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个参数。

转载于:https://www.cnblogs.com/whiteMu/p/5392400.html