3d立体相册，情人节，情侣生日礼物代码适用
废话不多说，直接上效果图（因为图片效果限制，所以不能高清）
其实这个3d相册并没有那么的难，学过前端代码的都知道用html5可以做出来。理论上也就是里面一个小正方形，外面一个大的正方形。然后加上透明度调整，再加上旋转就可以做出来。
加上鼠标的悬浮检查。弹开打的正方形
主要代码如下：
/*定义小正方体样式*/
.cube span{
display: bloack;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
.cube .in_pic{
width: 100px;
height: 100px;
}
.cube .in_front{
transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{
transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{
transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
transform: rotateX(-90deg) translateZ(200px);
}
其实都是前端代码控制的，直接做出微信小程序也是相同的道理。
有想要完整源码的小伙伴可以加我，在这个平台上有收徒的打算，如果小伙伴刚好需要一个能答疑，能带着你学习的师父，请联系我，q:2316773638
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/2859.html原文链接：https://javaforall.net
