CSS3之转换-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

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

  


新闻标题:CSS3之转换
标题网址:http://kswsj.cn/article/gooscg.html

其他资讯