189 8069 5689
一、转换
1.定义：改变元素在页面的形状、角度、大小、位置的一种效果。
2.分类：2D转换和3D转换。
2D转换：
(1)位移
1-1 作用：改变元素在页面中的位置；
1-2 语法：属性--transform;取值如下：
1-2-1 translate(x):改变元素在X轴的位置。X取值为正，向右移动；X取值为负，向左移动；
1-2-2 translate(x,y):x同上。Y取值为正，向下移动；Y取值为负，向上移动；
1-2-3 translateX(x):只在X轴上移动；
1-2-4 translateY(y):只在Y轴上移动;
(2)缩放
2-1 作用：改变元素在页面中的大小
2-2 语法 : 属性--transform;取值如下：
2-2-1：scale(value) value表示横向和纵向等比缩放值；默认值为1，表示原始大小；>1表示放大，0~1表示缩小
2-2-2：scale(x,y)
2-2-3 : scaleX(x)
2-2-4 : scaleY(y)
(3)旋转
3-1 作用：改变元素在页面上的角度，要根据转换原点实现转换效果
3-2 语法：属性--transform;取值如下：
3-2-1 rotate(ndeg) n表示转换角度，n为正，表示顺时针旋转，n为负，表示逆时针旋转
旋转需要注意的地方：1.转换原点；2.元素的坐标轴也随着一同旋转。
先旋转后偏移 与先偏移后旋转 的区别
(4)倾斜
4-1 作用：改变元素在页面中的形状；
4-2 语法：属性transform;取值如下：
4-2-1：skew(xdeg) 向X轴倾斜角度，相当于y轴倾斜角度。x取值为正，y轴逆时针倾斜一定角度；x取值为负，y轴顺时针倾斜一定角度
4-2-2：skew(xdeg,ydeg) y取值为正，x轴顺时针倾斜一定角度；y取值为负，x轴逆时针倾斜一定角度
4-2-3：skewX（xdeg）
4-2-4：skewY(ydeg)
3D 转换：与2D相比，多了一个Z轴
属性：perspective
作用：假定 人眼 到 投射平面的距离
注意：
该属性要放在3D转换元素的父元素上
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。