css3 3D动画效果

今天看了html页面上一个类似骰子的动画效果，感觉不比app上原生的效果差，出于好奇，学习了如何用css制作3D效果。

以下是我学习的过程，最底部是附件代码，感兴趣同学可以看看。

1.先复习w3cschool中关于CSS3 3D转换

http://www.w3school.com.cn/css3/css3_3dtransform.asp

2.上慕课网上，看相关视频

http://www.imooc.com/learn/77

视频我没有看完，直接下了demo看，不过感觉和我想要的效果不太一样。所以我运行demo看过以后直接去搜其他3D demo

3.很幸运，在搜索CSS3 3D效果 在百度文库中找到了类似的demo

http://wenku.baidu.com/link?url=QSik0TF5I9Y3Fjic73E7R-hn-r4R2Oj5vH6f_ezSH4It_Q-MbEopo7g_lcL3kNXr-HezF_3i_O5AG6DR5onO9vVsvPC0oWZ1d2ta-xYpz1u

4.在看懂demo的前提下，尝试设置动画的开启和关闭功能

5.通过JS完成动画的开启和关闭功能

效果图如下：

在百度的过程中发现很多css 3D动画效果的demo都要付费，所以再次感谢，以上三个免费并且开源的作者。

另外提供一个比较炫的3d网址，里面的网页可以单独打开。

http://www.xuebuyuan.com/396491.html

最后，与君共勉！！！

附件：

    
        
        
        
    
    
        

            

                

左边

                

右边

                

上面

                

底部

                

前面

                

后面