3D旋转女友相册——实现思路详解

       3D旋转女友相册，以技术流方式，展示ta最漂亮，动人的一面。

        可作为表白礼物，纪念日礼物，节日礼物....

源码下载      

现对开发思路讲解如下：

目录

一、创建代码目录结构如下：

二、html代码逻辑：

三、CSS样式详解：

---

一、创建代码目录结构如下：

 

二、html代码逻辑：

（1）通过audio音频标签自动播放背景音乐。

<audio autoplay="autopaly">      <source src="http://www.170mv.com/kw/antiserver.kuwo.cn/anti.s?rid=MUSIC_450897&response=res&format=mp3|aac&type=convert_url&br=128kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3"       type="audio/mp3" /></audio>

 

（2）对12张图片的处理逻辑，如下图所示：

        一个大的容器里包裹一大一小两个立方体，大立方体六个面各一张图片，小立方体六个面也是各一张图片。

       通过CSS3样式控制大小正方体进行3D旋转效果。