CSS之转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果，可以简单理解为变形

一、2D转换

1、移动（translate）

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

①语法：

                          transform：translate（x,y）;

或者分开写——transform：translateX(n);

                         transform：translateY(n);

②重点

• 定义2D转换中的移动沿着x和y轴移动元素
• 不会影响到其他元素的位置
• translate中的百分比单位是相对于自身元素的translate：（50%，50%）
• 对行内标签没有效果

2、旋转（rotate）

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

①语法：

transform：rotate（度数）

②重点

• rotate里面跟度数，单位是deg，比如rotate（45deg）
• 角度为正时，顺时针；为负时，为逆时针
• 默认旋转的中心点是元素的中心点

3、转换中心点（transform-origin）

我们可以通过该属性设置元素转换的中心点

①语法：

transform-origin：x y;

②重点

• 注意后面的参数x和y用空格隔开
• x和y默认转换的中心点是元素的中心点（50% 50%）
• 还可以给x和y设置像素或者方位名词（top bottom left right center）

4、缩放（scale）

只要给元素添加了这个属性就能控制它放大还是缩小

①语法：

transform：scale（x，y）；

②注意

• 其中的x 和y用逗号分隔
• transform：scale（1,1）：宽和高都放大一倍，相当于没有放大
• transform：scale（2）：只写一个参数，第二个参数则和第一个参数一样
• scale缩放最大的优势是可以设置转换中心点缩放，默认以中性点缩放而且不影响其他盒子

5、综合写法

同时使用多个转换，其格式为：transform：translate（）空格rotate（）空格scale（）....等

其顺序会影响转换的效果（先旋转会改变坐标轴方向）
当我们同时有位移和其他属性的时候，记着要将位移放到最前面

二、3D转换

1、三维坐标系

X轴：水平向右，X右边是正值，左边是负值

Y轴：垂直向下，Y下面是正值，上面是负值

Z轴：垂直屏幕，Z往外面是正值，往里面是负值

2、3D移动translate3d

transform：translateX(100px)  translateY(100px)  translateZ(100px);等价于 transform: translate3d(100px,100px,100px)

注：translate3d中的d必须小写；且xyz是不能省略的，如果没有值就写0

3、透视perspective

①如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内），透视我们也称为视距（人的眼睛到屏幕的距离），距离视觉点越近的在电脑平面成像越大，越远成像越小。透视的单位是像素

要求：透视写在被观察元素的父盒子上

d：就是视距，视距就是一个距离人的眼睛到屏幕的距离

z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大

②translateZ

3、3D旋转rotate3d

3D旋转可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义进行旋转

①语法

• transform:rotateX（45deg）：沿着x轴正方向旋转45度
• transform:rotateY（45deg）：沿着y轴正反向旋转45度
• transform:rotateZ（45deg）：沿着z轴正方向旋转45度
• transform:rotate3d（x,y,z,deg）：沿着自定义轴旋转deg（了解即可）

②判断元素旋转方向：左手准则

左手的手拇指指向x（y）轴的正方向，其余手指的弯曲方向就是该元素沿着x(y)轴旋转的方向

4、3D呈现transform-style：控制子元素是否开启三维立体环境

①语法：

transform-style: flat（默认值，子元素不开启3d立体空间） | preserve-3d（子元素开启3d立体空间）;

②注意事项：

• 代码写给父级，但是影响的是子盒子
• 使用此属性必须先使用 transform 属性