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

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

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

源码下载      

现对开发思路讲解如下：

目录

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

二、html代码逻辑：

三、CSS样式详解：

---

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

 

二、html代码逻辑：

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

             type="audio/mp3" />

 

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

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

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

 

三、CSS样式详解：

       主要利用css3属性transform，preserve-3d，animation，@keyframes等属性来实现一个旋转相册的美观特效。

 

       下面需要注意的样式都写了详细的注释：

（1）设置整体背景色：黑色

html{    background: #000; /*黑色*/    height: 100%;    }

 

（2）设置最外层容器样式：绝对位置、长、宽等

/*最外层容器样式*/.wrap{     position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    width: 400px;    height: 400px;    margin: auto;  }

（3）包裹所有容器样式

.cube{    width: 400px;    height: 400px;    margin: 0 auto;    /*所有子元素在3D空间中呈现*/    transform-style: preserve-3d;    /*Transform属性应用于元素的2D或3D转换。*/    /*沿着X轴旋转 -30度， 沿着Y轴旋转 -80度*/    transform: rotateX(-30deg) rotateY(-80deg);    /*把 animation 绑定到rotate*/    -webkit-animation: rotate 20s infinite;    /*匀速*/    animation-timing-function: linear;}/*创建动画是通过逐步改变从一个CSS样式设定到另一个。*/@-webkit-keyframes rotate{    from{transform: rotateX(0deg) rotateY(0deg);}    to{transform: rotateX(360deg) rotateY(360deg);}}

（4）定义所有大立方体图片样式：长、宽

.pic{    width: 400px;    height: 400px;}

（5）定义大立方体样式：绝对位置、长、宽、透明度、过度效果

.cube div{    position: absolute;    width: 400px;    height: 400px;    /*指定不透明度。从0.0（完全透明）到1.0（完全不透明）*/    opacity: 0.8;      /*所有属性 过度效果 持续5s*/    transition: all 5s;  }

（6）设置大立方体各个面的旋转方式

.cube .out_front{    transform: rotateY(0deg) translateZ(200px);}.cube .out_back{    transform: translateZ(-200px) rotateY(180deg);}.cube .out_left{    transform: rotateY(90deg) translateZ(200px);}.cube .out_right{    transform: rotateY(-90deg) translateZ(200px);}.cube .out_top{    transform: rotateX(90deg) translateZ(200px);}.cube .out_bottom{    transform: rotateX(-90deg) translateZ(200px);}

（7）定义内层小立方体图片样式

.cube .in_pic{    width: 200px;    height: 200px;}

（8）定义小正方体样式：展示、长、宽、绝对位置等

.cube span{    display: block;    width: 200px;    height: 200px;    position: absolute;    top: 100px;    left: 100px;}

（9）设置小立方体各个面的旋转方式

.cube .in_front{    transform: rotateY(0deg) translateZ(100px);}.cube .in_back{    transform: translateZ(-100px) rotateY(180deg);}.cube .in_left{    transform: rotateY(90deg) translateZ(100px);}.cube .in_right{    transform: rotateY(-90deg) translateZ(100px);}.cube .in_top{    transform: rotateX(90deg) translateZ(100px);}.cube .in_bottom{    transform: rotateX(-90deg) translateZ(100px);}

（10）设置鼠标移入立方体后的样式，外层立方体各个面向外扩张展示

.cube:hover .out_front{    transform: rotateY(0deg) translateZ(400px);}.cube:hover .out_back{    transform: translateZ(-400px) rotateY(180deg);}.cube:hover .out_left{    transform: rotateY(90deg) translateZ(400px);}.cube:hover .out_right{    transform: rotateY(-90deg) translateZ(400px);}.cube:hover .out_top{    transform: rotateX(90deg) translateZ(400px);}.cube:hover .out_bottom{    transform: rotateX(-90deg) translateZ(400px);}