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