CSS3之转换

一、转换

  1.定义：改变元素在页面的形状、角度、大小、位置的一种效果。

  2.分类：2D转换和3D转换。

     2D转换：

    (1)位移

        1-1 作用：改变元素在页面中的位置；

        1-2 语法：属性--transform;取值如下：

              1-2-1 translate(x):改变元素在X轴的位置。X取值为正，向右移动；X取值为负，向左移动；

              1-2-2 translate(x,y):x同上。Y取值为正，向下移动；Y取值为负，向上移动；

              1-2-3 translateX(x):只在X轴上移动；

              1-2-4 translateY(y):只在Y轴上移动;

    (2)缩放

        2-1 作用：改变元素在页面中的大小

        2-2 语法 : 属性--transform;取值如下：

              2-2-1：scale(value) value表示横向和纵向等比缩放值；默认值为1，表示原始大小；>1表示放大，0~1表示缩小

             2-2-2：scale(x,y)

             2-2-3 : scaleX(x)

             2-2-4 : scaleY(y)

     (3)旋转

         3-1 作用：改变元素在页面上的角度，要根据转换原点实现转换效果

         3-2 语法：属性--transform;取值如下：

               3-2-1 rotate(ndeg) n表示转换角度，n为正，表示顺时针旋转，n为负，表示逆时针旋转

        旋转需要注意的地方：1.转换原点；2.元素的坐标轴也随着一同旋转。

        先旋转后偏移 与先偏移后旋转  的区别

   (4)倾斜

         4-1 作用：改变元素在页面中的形状；

         4-2 语法：属性transform;取值如下：

                4-2-1：skew(xdeg) 向X轴倾斜角度，相当于y轴倾斜角度。x取值为正，y轴逆时针倾斜一定角度；x取值为负，y轴顺时针倾斜一定角度

                 4-2-2：skew(xdeg,ydeg) y取值为正，x轴顺时针倾斜一定角度；y取值为负，x轴逆时针倾斜一定角度

                4-2-3：skewX（xdeg）

               4-2-4：skewY(ydeg)         

        3D 转换：与2D相比，多了一个Z轴

              属性：perspective

                 作用：假定 人眼 到 投射平面的距离

                 注意：

                      该属性要放在3D转换元素的父元素上