原生JS实现3D旋转相册

来源：互联网发布：分级诊疗知乎编辑：程序博客网时间：2024/05/16 15:34

原生JS实现3D旋转相册
所示效果如图
这里写图片描述

我们首先建立html文件和CSS文件，命名“3D旋转相册.html”和“3D.css”
然后再html文件中写入如下代码

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>3D旋转相册</title>    <link rel="stylesheet" type="text/css" href="3d.css"></head><body>        <div id="album">            <img src="images/01.jpg" alt="01.jpg出错"/>            <img src="images/02.jpg" alt="02.jpg出错"/>            <img src="images/03.jpg" alt="03.jpg出错"/>            <img src="images/04.jpg" alt="04.jpg出错"/>            <img src="images/05.jpg" alt="05.jpg出错"/>            <img src="images/06.jpg" alt="06.jpg出错"/>            <img src="images/07.jpg" alt="07.jpg出错"/>            <img src="images/08.jpg" alt="08.jpg出错"/>            <div id="base"></div>  <!--底盘-->        </div></body></html>

我们先修改整个相册的背景，在CSS文件中写入

body {    margin: 0;  /*去除外边距*/    background-color: black;   /*背景：黑色*/}

为一个div 添加一个id=”ablum”,将这个div作为整个相册（包括图片和底盘），添加样式并为img 标签添加样式

#album {    width:120px;    height: 200px;    position: relative;      border: 1px grey solid;    border-radius: 4px;    margin: 160px auto;}

#album img {    width: 120px;    height: 200px;    position: absolute;      box-shadow: 0 0 8px white; /*外阴影*/}

由于absolute定位使元素的位置与文档流无关，因此不占据空间。
absolute定位的元素和其他元素重叠。
这时效果如图显示
这里写图片描述
我们继续为#album添加样式

    transform: rotateY(0deg);    transform-style: preserve-3d;   //设置3D视角    perspective: 1200px;  /*设置元素被查看视角的距离1200PX*/

接下来将引入js

    <script type="text/javascript">        var album=document.getElementById("album");        var imgs=album.getElementsByTagName("img");                     //获取图片数组        var length=imgs.length; //获取数组的长度        var deg=Math.floor(360/length);//计算每个图片偏转角度        for(var i=0;i<length;i++){               //console.log(i*deg);                imgs[i].style.transform='rotateY('+i*deg+'deg) translateZ(400px)';    //为每个图片 添加样式沿Y轴旋转并分散400px        }      </script>

此时整个相册显示如图
这里写图片描述
为了更美观，我们将整个相册沿X轴旋转-10deg,继续为#album添加样式

transform:rotateX(-10deg);

此时整个相册显示如图
这里写图片描述
接下来就应该让它旋转起来了
添加JS代码

 var x = 0;        setInterval(function(){        album.style.transform = " rotateX(-12deg) rotateY("+ (x++) * 0.2 +"deg)";        },20);

动态图片不便展示，只要你按照教程制作是没有问题的。
接下来应该是底盘的制作

为#base添加样式代码
因为底盘与图片垂直，所以 transform: rotateX(90deg);
背景改为渐变色，radial-gradient的使用具体参照w3c。

#base {    width: 1000px;    height: 1000px;    border-radius: 50%;  /*圆形*/    margin: -290px auto 0px -450px;    background: -webkit-radial-gradient(rgba(234, 228, 228, 0.76) 5%, rgba(171, 171, 152, 0.51) 20%, rgba(255, 255, 255, 0.1) 55%); /* Safari 5.1 - 6.0 */    background: -o-radial-gradient(rgba(234, 228, 228, 0.58) 5%, rgba(171, 171, 152, 0.38) 20%, rgba(255, 255, 255, 0.06) 55%); /* Opera 11.6 - 12.0 */    background: -moz-radial-gradient(rgba(234, 228, 228, 0.58) 5%, rgba(171, 171, 152, 0.38) 20%, rgba(255, 255, 255, 0.06) 55%); /* Firefox 3.6 - 15 */    background: radial-gradient(rgba(234, 228, 228, 0.58) 5%, rgba(171, 171, 152, 0.38) 20%, rgba(255, 255, 255, 0.06) 55%); /* 标准的语法（必须放在最后） */    transform: rotateX(90deg);

好了，3D旋转相册已经制作完毕了。

2 0