css3基础变形的语法以及使用介绍-kb88凯时官网登录

时间:2018-12-30
阅读:
免费资源网 - https://freexyz.cn/

语法:

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轴同时位移

免费资源网 - https://freexyz.cn/
返回顶部
顶部
网站地图