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

语法:

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

展开阅读全文

上一篇：编写一个函数将所有0python 下一篇：帝国cms整合美图秀秀M4头像上传组件，写入附件数