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

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

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

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

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

 uT7胜于蓝|优秀个人博客

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

 uT7胜于蓝|优秀个人博客

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

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

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

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

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

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

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

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

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

 uT7胜于蓝|优秀个人博客

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

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

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

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

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

 uT7胜于蓝|优秀个人博客

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

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

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

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

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

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

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

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

 uT7胜于蓝|优秀个人博客

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

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

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

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

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

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

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

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

Tags:

Css3基础   语法

很赞哦! ()

文章评论

当前时间

快速排名

  • 网站建设|万词霸屏,企业软文推广,刷下拉框
  • 快速排名:不用再等SEO三个月,只需3-7天即可把行业关键词覆盖百度搜索引擎首页,点击不收费,排名报表,真实访问量报表一目了然。

合作加盟

  • 扫码请注明来意,否则不会通过
  • 填写商户姓名不要带有“超市”,“便利店” ,“百货”等
  • 扫码成为快钱代理
  • 扫码加站长微信,为您推荐快钱总部负责人
  • 快钱POSS机(电签版)
  • 1,免押版:签约费率快捷交易0.38%,常规交易0.65%
  • 贷记卡单笔≥3000元视为激活
  • 2,,有押版:签约快捷交易0.38%,常规交易0.65%
  • 激活首刷≥99元,扣除99元系统服务费,多出部分shishi到账
  • 电签版ipos参与每月扶持奖励
  • 电签版ipos与Mpos单独考核台均
  • 30台以上有效激活奖励3000元扶持金
  • 当月交易额≥3000元的为活跃用户

站点信息

  • 建站时间:2018-10-24
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计7074篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 扫描二维码:请注明来意,否则不会通过
  • 微信号:扫描二维码,关注我们
歌名 - 歌手
0:00