一、知识点

1、em && rem && vw/vh

em：根据当前样式里面定义的font-size大小来计算，如当前样式里面没定义font-size，那么就根据父级上的font-size大小来计算如：.box{    font-size:20px;  //此时1em=20px    height:20em;  //那么，20em=400px，也就是height:400px}rem：只根据html上的font-size大小进行变化html上的font-size大小需要动态计算，计算方式有2种：    a. 通过js获取窗口大小    b. vm/vh( 100vw=当前窗口的大小 )        vw：根据当前视口的宽度来计算        100vw：代表整个屏幕宽度，也就是把屏幕宽度分成了100个格子，在414px的情况下，每个格子占据4.14px        100vh：代表整个屏幕高度        如：以一张图片414*182为例        设置：html{ font-size:4vw; }  //即等价于html{ font-size:16.56px    414/100*4=16.56}        .img{ height:182/16.56rem;width:100%; }         这样也可以通过动态计算html的font-size大小，来动态设置元素的样式

2、零碎知识点：

• 遇见div嵌套的，子级加margin会导致父级div往下，可以给父级div加border，这样就不会导致父级div往下，而只有子级div往下了。

• 变形元素：进行transfrom:3d变形的元素，主要进行transform、transform-origin、backface-visibility等属性的设置；
• 观察者：浏览器模拟出来的用来观察被透视元素的一个没有尺寸的点，观察者发出视线，类似于一个点光源发出光线

• 被透视元素：也就是被观察者观察的元素，根据属性设置的不同，它有可能是变形元素本身，也有可能是它的父级或祖先元素，主要进行perspective、perspective-origin等属性的设置。

• perspective：景深——近大远小，给变形元素的父级加，属性值表示眼睛到物体的距离

  用法：perspective:500px;加了就是3D的效果，不加就是2D

• transfrom-style:preserve-3d; //避免子集元素的3D变化受到影响，加给变化元素的父级

• 只要看见相同的物体，由近及远，物体慢慢变小，说明就用到了景深

视线3D效果的步骤：

a. 建立父级加属性：perspective: 800px; //景深，眼睛到物体的距离，近大远小transform-style: preserve-3d; //视线3D舞台效果perspective-origin:50% 50%; //观察者的位置，默认是中心位置( 50% 50% )

b. 子级-也就是变形元素：scale缩放 rotate旋转 translate移动 skew倾斜 通过这些来进行3d效果，都是X、Y、Z三个方向

transform-origin：设置 transform 变换的基点位置。默认情况下基点位置为元素的中心点。加在子级元素上。transform:translateZ(-60px); //translateZ为负值，表示元素后退(相当于为值为0的元素而言)

代码：