本文介绍了一个使用HTML、CSS和JavaScript实现的3D立体相册页面设计，相册包含200张小图片作为背景，一张大图片作为前置图片，相册整体缓慢逆时针旋转，并且每隔几秒会有一张前置图片跳出，增加视觉惊喜。
闲暇时间，把自己的一些资料整理一下，这里展示的是一个3D的立体相册页面，因为是动态的相册，整体一直在缓慢逆时针旋转，截图只能展示静态的，看起来没实际效果那么美观。
每隔几秒中间会跳出一张前置图片，有点惊喜感，如下图所示：
整个相册一共由200张小图片做成背景，一张大图片为前置图片，因为文件数量有点多，这里展示部分代码
sphere.html
<!DOCTYPE html>
<html>
<head>
<title>致青春</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/animate.min.css">
</head>
<body>
<script src="js/table.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/three.js"></script>
<script src="js/tween.min.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/CSS3DRenderer.js"></script>
<div id="container"></div>
<div id="info">致青春</div>
<div id="menu">
<button id="table">表格</button>
</div>
<div class="show_info animated" style="display:none;">
<div class="info_my">
<img src="img/cc.png" />
<div class="info_mem">
<div class="nickname">鞠婧祎</div>
<div class="id">ID:女神</div>
<div class="vote">性别:女</div>
</div>
</div>
<div class="intro">当岁月老去，我依然记得曾经夕阳下我们美好的誓言!
，你的过去我来不及参与,你的未来我奉陪到底.</div>
</div>
<script>
var personArray = new Array;
var CurPersonNum = 0;
// animate
var _in = ['bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight','slideInDown','slideInLeft','slideInRight'];
var _out = ['bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig','rotateOut',
最低0.47元/天 解锁文章
扫一扫
4146
到【灌水乐园】发言
