CSS3中2D转换（干货笔记）

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

 下面我们来介绍2D的转换：

一、移动（translate）根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动,可以改变元素在页面中的位置，类似于定位。

1、语法：

transform:translate(x,y);或者分开写也是可以的

transform:translateX(n);

transform:translateY(n);

2、重点：

• 定义2D转换中的移动，沿看X,Y轴元素移动；
• translate最大的优点就是不会影响其他元素的位置；
• translate自身的百分比是相对于自身元素translate（50%，50%）;
• 对行内标签没有效果；

二、旋转（rotate）：

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

语法：transfrom:rotate(旋转的度数)

重点：

• rotate(度数),单位是deg例如：rotate(45deg);
• 角度是正为顺时针，是负为逆时针；
• 默认顺时针的中心点为元素的中心点；

三、2D转换中心点transform-origin:

语法：transform-origin:x y;

重点：

• 注意后面x,y用空格隔开；
• x y默认的中心点是元素的中心点(50% 50%);
• 还可以给x y设定像素或者方向名词(right left center bottom top);

四、缩放 scale()：

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

•  修改元素的大小，放大或者缩小元素
•  为负数会颠倒
•   scale(a)    scale(x,y)  

五、倾斜 skew()：

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

• skewX();表示只在X轴(水平方向)倾斜。
• skewY();表示只在Y轴(垂直方向)倾斜。
•  让元素在不同方向上倾斜

•  skew(a)   等于  skew(a,0)
•  skew(x,y)  
• 单位 角度deg

六、 matrix()：

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

 用矩阵表达变换量 matrix(a,b,c,d,x,y)

•    a c x
•    b d y
•    0 0 1

下面运用一个具体案例来实践一下：

如图效果：

代码如下：

 可以根据自己的要求来变换改动多动手，发挥自己的想象能力。