前端学习day26：transform变形

1.变形的定义

2. 2D变形

transform 变换样式                                     ps:transform [trænsˈfɔːm] 使改变形态;使改变外观(或性质);使改观

transform 变换样式的参照物永远是自身元素

transform 的层级会比普通元素更高

不会改变元素在文档流中的状态

rotate 旋转                                                  ps:rotate  [rəʊˈteɪt] (使)旋转，转动;(工作)由…轮值;(人员)轮换，轮值

transform: rotate(角度值) 设置元素绕着中心的旋转效果。角度值为正，元素顺时针旋转；角度值为负，元素逆时针旋转。

translate                                                           ps:translate [trænzˈleɪt] 翻译;译;被翻译;被译成;(使)转变，变为

transform：translate(偏移量1, 偏移量2); 设置元素以自身初始位置为原点的偏移效果。

偏移量1:定义元素水平方向的偏移量；可以单独用translateX()来设置。

偏移量2:定义元素垂直方向的偏移量；可以单独用translateY()来设置。

scale 缩放                                                        ps:scale [skeɪl]  n.(尤指与其他事物相比较时的)规模，范围，程度;等级;级别;等级体系  v.攀登;到达…顶点;去鳞;刮除牙石

transform: scale(倍数);设置元素的缩放倍数。

倍数 0~1，元素缩小；

倍数 >1，元素放大；

倍数 <0，元素倒置（-1~0 倒置缩小，小于-1 倒置放大）。

倍数可以设置两个值，分别表示水平方向缩放倍数scaleX、垂直方向缩放倍数scaleY。

skew 倾斜                                                        ps:skew [skjuː] 歪曲;曲解;使不公允;影响…的准确性;偏离;歪斜

transform: skew(角度); 设置元素的倾斜角度。

角度可以设置两个值，分别表示水平方向倾斜角度skewX、垂直方向倾斜角度skewY。

3. 变化原点

每个元素都有一个 transform-origin（变化原点）样式，其默认位置正好位于元素的水平中心和垂直中心线的交叉点。默认值为transform-origin:50% 50%; /*变化原点：水平位置 垂直位置*/。

可以根据需要自行设置变化的原点位置。 transform-origin:x y设置变换原点 默认是center center，x,y分别是水平方向的偏移量和垂直方向的偏移量,支持关键词left center top bottom也支持具体的值和百分比例如：

设置左顶点为原点 transform-origin:0 0;

设置元素外的某个点为原点 transform-origin:-100% -100%;

4. 变换顺序组合

transform 可以使用复合写法，需要用到的变换样式都可以写到一起用空格隔开，比如：transform: scale(*) translate（*, *）skew(*) rotate(*);

变化样式内多个样式值顺序的不同会导致完全不一样的结果，因为旋转会改变坐标系的位置，比如：transform:translateX(200px) translateY(200px) rotate(45deg);和transform:rotate(45deg) translateX(300px) translateY(200px);效果是不一样的。

transform:translateX(200px) translateY(200px) rotate(45deg);

transform:rotate(45deg) translateX(300px)  translateY(200px) ;

5. 3D变形

X轴：左右方向

Y轴：上下方向

Z轴：垂直于屏幕面的方向

（使用浏览器调试功能查看下列属性对显示效果的影响）

perspective 景深度                                      ps:perspective [pəˈspektɪv] 态度;观点;思考方法;客观判断力;权衡轻重的能力;透视法

可以理解为用户距离变换元素之间的一个距离,值越大距离越远

景深的原点默认为center center

要看到3D的变换效果，必须设置景深perspective属性，将盒子设置成为一个3d的容器才能看到3d变换。该属性接收像素单位的值。

给进行了3D变形元素的父级添加perspective而不是变形元素本身。

perspective-origin

设置景深视觉基点，默认在元素中央。

transform-style

如果子元素有多个3D变形效果，需要添加transform-style: preserve-3d;属性来显示正确的3D层级。           ps:preserve [prɪˈzɜːv] v.保护;维护;保留;维持…的原状;保存;保养;贮存;保鲜  n.(某人或群体活动、工作等的)专门领域;果酱;腌菜;泡菜

6.浏览器解析html的过程

            1. change(构建html dom数)
            2. style(计算样式) 浏览器会确定每个dom元素最终应用的css规则
            3. layout(布局) 计算每个dom元素最终在屏幕上显示的大小和位置 render tree 
            4. paint(绘制图层) 在多个层面上绘制dom元素的颜色,文字,图像,边框等等 z-index transform
            5.Composite  (渲染层合并) 按照合理图层进行合并,调用cpu绘制显示到屏幕上

重绘(Repaint)/重构[也叫重排](reflow)             ps:repaint  vt.再次（重新）油漆，再次（重新）画;恢复…原来的色彩  n.重新涂漆的东西    reflow  软熔焊接;文档重整，页面重排(调整文本在计算机屏幕上的显示密度) 

重绘不一定会触发重构但是重构一定会触发重绘