您现在的位置是:首页 > 网站制作 > CSS3|Html5CSS3|Html5

Css3基础变形的语法以及使用介绍

胜于蓝2019-07-30【CSS3|Html5】人已围观

简介语法: transform: rotate(旋转) | scale(缩放) | skew(倾斜) | translate(位移);注: 当多种变形方式综合在一起时,用空格隔开 1. rotate 旋转( X/Y/Z 必须为大写 ) ① rot

语法:Gz9胜于蓝|优秀个人博客

 Gz9胜于蓝|优秀个人博客

transform: rotate(旋转) | scale(缩放) | skew(倾斜) | translate(位移);
注: 当多种变形方式综合在一起时,用空格隔开

 Gz9胜于蓝|优秀个人博客

1. rotate 旋转( X/Y/Z 必须为大写 )Gz9胜于蓝|优秀个人博客

     rotateX(30deg)  沿X轴翻转30deg  等价于  rotate3d(1,0,0,30deg)Gz9胜于蓝|优秀个人博客

    3d空间的沿X轴翻转Gz9胜于蓝|优秀个人博客

     rotateY(30deg) 沿Y轴翻转30deg  等价于  rotate3d(0,1,0,30deg)Gz9胜于蓝|优秀个人博客

    3d空间的沿Y轴翻转Gz9胜于蓝|优秀个人博客

     rotateZ(30deg) 沿Z轴翻转30deg  等价于  rotate3d(0,0,1,30deg)Gz9胜于蓝|优秀个人博客

    3d空间的沿Z轴翻转Gz9胜于蓝|优秀个人博客

     rotate(45deg) 当不指定轴时,相当于2d空间的旋转,正值为顺时针,负值为逆时针Gz9胜于蓝|优秀个人博客

    注: 设置旋转变形时,单位degGz9胜于蓝|优秀个人博客

 Gz9胜于蓝|优秀个人博客

2. scale 缩放Gz9胜于蓝|优秀个人博客

     scaleX(1.5)  沿X轴放大或缩小,大于1为放大,小于1为缩小Gz9胜于蓝|优秀个人博客

     scaleY(0.5)  沿Y轴放大或缩小Gz9胜于蓝|优秀个人博客

     scale(1.5)  X轴,Y轴同时放大或缩小Gz9胜于蓝|优秀个人博客

     scale(-1.5)  先翻转再缩放Gz9胜于蓝|优秀个人博客

 Gz9胜于蓝|优秀个人博客

3. skew 倾斜(扭曲)Gz9胜于蓝|优秀个人博客

     skewX(30deg)  沿X轴倾斜Gz9胜于蓝|优秀个人博客

     skewY(-30deg)  沿Y轴倾斜Gz9胜于蓝|优秀个人博客

     skew(30deg)  不指定轴时,默认沿X轴倾斜Gz9胜于蓝|优秀个人博客

    ④ 注: 下方两种写法倾斜效果不同Gz9胜于蓝|优秀个人博客

        (a)  skew(30deg,30deg)  X轴,Y轴同时倾斜Gz9胜于蓝|优秀个人博客

        (b)  skewX(30deg)    skewY(30deg)  X轴,Y轴同时倾斜Gz9胜于蓝|优秀个人博客

    注: 倾斜单位角度(deg)Gz9胜于蓝|优秀个人博客

 Gz9胜于蓝|优秀个人博客

4. translate 位移Gz9胜于蓝|优秀个人博客

     translateX(100px)  沿X轴位移,向右为正,向左为负Gz9胜于蓝|优秀个人博客

     translateY(-100px)  沿Y轴位移,向下为正,向上为负Gz9胜于蓝|优秀个人博客

     translateZ(100px)  沿Z轴位移,向前为正,向后为负Gz9胜于蓝|优秀个人博客

        注: 当设置沿Z轴的位移时,需要给本元素或父元素设置透视值Gz9胜于蓝|优秀个人博客

     translate(100px)  不指定轴时,默认沿X轴位移Gz9胜于蓝|优秀个人博客

     translate(1000px,100px)  X轴和Y轴同时位移Gz9胜于蓝|优秀个人博客

        translateX(100px)   translateY(100px)  X轴和Y轴同时位移Gz9胜于蓝|优秀个人博客

Tags:

Css3基础   语法

很赞哦! ()

文章评论

当前时间

合作加盟

  • 快钱POSS机
  • 费率:0.038%(刷1万=38元手续费)
  • 单笔最高刷卡金额:5万
  • 单月最高刷卡金额:600万

快钱代理公告

  • 凡事扫码代理必须实名认证
  • 实名认证后才可拉进代理微信群
  • 代理微信群有相关活动政策等

本站推荐

站点信息

  • 建站时间:2018-10-24
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计1402篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们