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许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站栏目:CSS3之转换-创新互联
浏览地址:http://ybzwz.com/article/ceehec.html