纯JS实现旋转木马/3d相册

纯JavaScript实现 旋转木马/3d相册特效(鼠标拖拽旋转)

先来看看效果图

说一下实现的思路
旋转木马是通过依靠拥有景深(perspective)属性的盒子(此处盒子id起为:perspective)产生向网页内部的延伸感，并让装有图片沿z轴平移后(translateZ(Xpx))的盒子(此处起名为wrap)在拥有景深属性的盒子(perspective)内凭借transform属性产生的3d效果沿盒子(wrap)y轴旋转转动来实现的。

3d实现过程

首先要知道在js中transform中的xyz轴的含义

1. 首先设置一个div，为其加上perspective的属性(撑开空间)，方便后边观察效果

/* 场景景深 */
#perspective{
perspective: 700px;		/*此属性是实现旋转木马的要点，能产生空间上的距离/延伸感。在此盒子中放置图片的盒子便可以实现向网页内部延伸的感觉*/
}

2. 其次，设置装有图片盒子的容器wrap,使其居中显示，并加上position:relative的属性，让其内的图片定位。加上transform属性，在之后会用到。

#wrap{
	position: relative;
	width: 200px;
	height: 200px;
	margin: 150px  auto;
	border:  1px solid black;
	transform-style: preserve-3d;  /*实现3d效果的关键步骤，与boxshadow配合使用可以忽略层级问题，之后会说到*/
	transform: rotate