js原生加简单C3动画实现--相册旋转拖拽效果

废话多说无益，直接上两张图片看效果，然后进入代码环节

微信截图_20170503192746.png

微信截图_20170503192802.png

准备阶段

1）找十张左右的大小差别不大的照片（最好120*180的 比例在4:6）
2）创建一个dome文件，里面创建一个html文件和一个img的文件夹，把照片放进去img文件夹中

-注意-：阅读下面的东西之前，请先把代码复制到你的html文档中，把照片的名字更改一下，先去自己看下效果，然后再回来阅读。

3）效果分析{
1、从最终呈现的效果来看，是需要一个3D的场景的
2、照片是围成一个圈的，并且自身具备一定的角度的
3、可以上下左右移动，并且带有一定的惯性运动（鼠标事件）
4、开场动画是从中间一个个出现的
}
4）{
1、首先肯定是先把页面搭建起来，也就是把body里的东西先让他呈现出来，不要先管他动不动，怎么动的问题
2、搭建3D场景，设置transform的各项属性，让照片围成成一个圆
3、拖动的三个鼠标事件（按下鼠标的效果，按着移动的效果，抬起鼠标的效果）
4、添加底座和开场动画
}

开始编写代码

我依然还是采用边写代码边注释解释的方式来写这下面的代码

    
    
    
    


    

        

            ![](img/1.jpg)
            ![](img/2.jpg)
            ![](img/3.jpg)
            ![](img/4.jpg)
            ![](img/5.jpg)
            ![](img/6.jpg)
            ![](img/7.jpg)
            ![](img/8.jpg)
            ![](img/9.jpg)
            ![](img/10.jpg)
            ![](img/11.jpg)