Css3（下）

扭曲skew

• 扭曲skew和translate、scale一样同样具有三种情况；
• skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；
• skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；
• skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）；

skew(<angle> [, <angle>])

• skew(<angle> [, <angle>]) ：X轴Y轴上的skew transformation（斜切变换）。
• 第一个参数对应X轴，第二个参数对应Y轴。
• 如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
• skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。
• 其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。
• 同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置。
• 例：transform:skew(30deg,10deg)

skewX(<angle>)

• skewX(<angle>) ： 按给定的角度沿X轴指定一个skew transformation（斜切变换）。
• skewX是使元素以其中心为基点，并在水平方向（X轴）进行扭曲变行，
• 同样可以通过transform-origin来改变元素的基点。
• 例：transform:skewX(30deg)

skewY(<angle>)

• skewY(<angle>) ： 按给定的角度沿Y轴指定一个skew transformation（斜切变换）。
• skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向（Y轴）扭曲变形。
• 同样我们可以通过transform-origin来改变元素的基点。
• 例：transform:skewY（10deg）

矩阵matrix

• matrix(<number>, <number>, <number>, <number>, <number>, <number>) ：
• 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。
• 就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，

改变元素基点transform-origin

• 前面我们多次提到transform-origin这个东东，他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置，因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。
• 但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置

transform-origin使用规则

• transform-origin(X,Y):用来设置元素的运动的基点（参照点）
• 默认点是元素的中心点。
• 其中X和Y的值可以是百分值,em,px，
• 其中X也可以是字符参数值left,center,right；
• Y和X一样除了百分值外还可以设置字符值top,center,bottom，这个看上去有点像我们background-position设置一样；