1   2   3   4     
       5       6      62  63  64 
     
       65 
      
        66 
        67 
        68 
        69 
        70 
        71 
        72 
       
 73 74 
      
 75 
     
 76  77  78  108  109 

笔记：

1，解决for循环没有块级作用域的问题：

（1）使用匿名函数，传递参数

（2）使用ES6中的let,注意这儿要考虑ES6中对于浏览器的兼容性

2，如何实现3d效果

CSS3  3D效果的相关知识

当我们使用css3 的3d效果的时候，首先要知道3d效果是建立在空间坐标轴上的：

三维空间坐标轴如下：

右图所示：注意这个坐标轴是和我们常见的坐标轴是不一致的，右下角为X轴，Y轴，Z轴的正方向

 

在建立了坐标轴之后，下面的就是对于图片绕着坐标轴进行的旋转运动：

1，关于rotateX,  rotateY,  rotateZ的认识

• rotateX(angle)
• rotateY(angle)
• rotateZ(angle)

上面三个属性分别表示图像绕X 轴，图像绕Y轴  ，图像绕Z轴进行的旋转，

2，关于perspective:透视，视点

我们知道，我们在距离物体不同的距离看物体，我们其实看到的效果是不一样的，

perspective设置的像素值在显示屏上表现的效果相当于我们看显示屏的效果，

相当于显示屏是我们的眼睛，而perspective的值是坐标轴原点距离显示屏的距离

3，translateX, translateY ,translateZ:

表明物体沿着X轴，Y轴，Z轴移动的距离，当我们没有设置rotateX和rotateY的时候，Z轴是正对着我们的，当translateZ逐渐接近perspective的时候，相当于，我们看到的物体从坐标原点逐渐靠近我们，

当translateZ的值大于perspective的时候，这时候屏幕上的元素大到占满整个屏幕之后然后消失了，因为这相当于物体移动到了我们的眼睛后方，我们当然看不到了

4，perspective-orign:

表明所看舞台或者元素的中心，默认：perspective-orign:50%  50%;

5,tranform-style:flat|preserve-3d

表明是否3d透视，这个属性应用在3D变换的兄弟元素的父元素上

6 backface-visibility:hidden:

表明是否可以看到后面的元素，默认hidden,不可看到

3D效果的html结构

结构如下：

.stage{          persective:800px    }.container{          transform-style:preserve-3d        }

　　对于舞台和容器应用上面CSS对所有的图片应用position：absolute:共用一个中心点,但是这样我们得到的只是几张图片纠缠在一起，如何让他们分开，这里使用tanslateZ进行改变图片距离原点的距离，应用了translateZ之后，图片就会向四周扩散开来