3d正方体旋转相册代码_3D旋转女友相册——实现思路详解

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

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

       作品主要是由HTML5+CSS3制作而成，视频效果演示：

源码下载地址：https://download.csdn.net/download/yuzongtao/12362410

现对开发思路讲解如下：

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

二、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旋转效果。

三、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);}