3D旋转⼥友相册——实现思路详解
3D旋转⼥友相册，以技术流⽅式，展⽰ta最漂亮，动⼈的⼀⾯。
可作为表⽩礼物，纪念⽇礼物，节⽇礼物....
现对开发思路讲解如下：
⽬录
⼀、创建代码⽬录结构如下：
⼆、html代码逻辑：
（1）通过audio⾳频标签⾃动播放背景⾳乐。
<audio autoplay="autopaly">
<source src="www.170mv/kw/antiserver.kuwo/anti.s?rid=MUSIC_450897&response=res&format=mp3|aac&type=convert_url&br=128kmp3&agen        type="audio/mp3" />
</audio>
（2）对12张图⽚的处理逻辑，如下图所⽰：
⼀个⼤的容器⾥包裹⼀⼤⼀⼩两个⽴⽅体，⼤⽴⽅体六个⾯各⼀张图⽚，⼩⽴⽅体六个⾯也是各⼀张图⽚。
通过CSS3样式控制⼤⼩正⽅体进⾏3D旋转效果。
三、CSS样式详解：
主要利⽤css3属性transform，preserve-3d，animation，@keyframes等属性来实现⼀个旋转相册的美观特效。      下⾯需要注意的样式都写了详细的注释：
（1）设置整体背景⾊：⿊⾊
html{
background: #000; /*⿊⾊*/
height: 100%;
html图片展示特效}
（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）设置⿏标移⼊⽴⽅体后的样式，外层⽴⽅体各个⾯向外扩张展⽰

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。