百变鹏仔-专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

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

作者:鹏仔先生日期:2020-06-02 16:59:04浏览:2674分类:CSS


语法:

transform: rotate(旋转) | scale(缩放) | skew(倾斜) | translate(位移);

注: 当多种变形方式综合在一起时,用空格隔开


1. rotate 旋转( X/Y/Z 必须为大写 )

    ① rotateX(30deg)  沿X轴翻转30deg  等价于  rotate3d(1,0,0,30deg)

    3d空间的沿X轴翻转

    ② rotateY(30deg) 沿Y轴翻转30deg  等价于  rotate3d(0,1,0,30deg)

    3d空间的沿Y轴翻转

    ③ rotateZ(30deg) 沿Z轴翻转30deg  等价于  rotate3d(0,0,1,30deg)

    3d空间的沿Z轴翻转

    ④ rotate(45deg) 当不指定轴时,相当于2d空间的旋转,正值为顺时针,负值为逆时针

    注: 设置旋转变形时,单位deg


2. scale 缩放

    ① scaleX(1.5)  沿X轴放大或缩小,大于1为放大,小于1为缩小

    ② scaleY(0.5)  沿Y轴放大或缩小

    ③ scale(1.5)  X轴,Y轴同时放大或缩小

    ④ scale(-1.5)  先翻转再缩放


3. skew 倾斜(扭曲)

    ① skewX(30deg)  沿X轴倾斜

    ② skewY(-30deg)  沿Y轴倾斜

    ③ skew(30deg)  不指定轴时,默认沿X轴倾斜

    ④ 注: 下方两种写法倾斜效果不同

        (a)  skew(30deg,30deg)  X轴,Y轴同时倾斜

        (b)  skewX(30deg)    skewY(30deg)  X轴,Y轴同时倾斜

    注: 倾斜单位角度(deg)


4. translate 位移

    ① translateX(100px)  沿X轴位移,向右为正,向左为负

    ② translateY(-100px)  沿Y轴位移,向下为正,向上为负

    ③ translateZ(100px)  沿Z轴位移,向前为正,向后为负

        注: 当设置沿Z轴的位移时,需要给本元素或父元素设置透视值

    ④ translate(100px)  不指定轴时,默认沿X轴位移

    ⑤ translate(1000px,100px)  X轴和Y轴同时位移

        translateX(100px)   translateY(100px)  X轴和Y轴同时位移


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯