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转换元素的父元素上

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。