为了账号安全,请及时绑定邮箱和手机立即绑定

三分钟学会用 js + css3 打造酷炫3D相册

2018.01.10 10:31 8512浏览

中秋主题的3D旋转相册
Paste_Image.png

如图,这是通过Javascript和css3来实现的。整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的js初学者感受到学习的乐趣。我会尽可能讲得详细,不需要你对css和js有多么高深的理解,你也可以跟着一步步做出来。如果你是为了讨女票开心,那么也完全可以把图片换成对方的照片,在某个特别的时刻给对方一个惊喜哦 ~

css3的强大使得网页的展示变得空前得丰富起来,再配合简单的js代码,就可以实现这个效果。好了,话不多说,让我们开始吧。

1. 页面模板
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>中秋节快乐</title>
  <style>

  </style>
 </head>
 <body>

 </body>

 <script>

 </script>
</html>

1.1 <meta charset="UTF-8" /> :这句话的含义是,设置网页编码为utf-8,确保中文可以正常显示。

1.2.<title>中秋节快乐</title> :设置网页的标题。

就是它:
Paste_Image.png

1.3.<style> </style> : 在style里面可以编写css样式,所谓的css就是相当于给dom元素披上了一层美丽的外衣。

1.4.<body> </body> : 在body区域里面添加dom元素,也就是一个网页的主题框架。比如div,p,a标签等,就是放在这个部分的。

1.5.<script> </script> :这是js脚本区域,单纯的说,就是为了动态地控制body区域里面的标签元素。之所以放在body的下面,是为了保证浏览器先把所有的dom元素都渲染完毕,才进行js操作。

2.调背景色

在style块里面给整个页面渲染成黑色调

*{padding:0px;margin:0px;} /*这是为了消除默认dom元素的内外边距,使得我们写css的时候更精确*/
body{background:#000;}

#######000是纯黑色
Paste_Image.png
#######F00是纯红色
Paste_Image.png
#######0F0是纯绿色
Paste_Image.png
#######00F是纯蓝色
Paste_Image.png

顺便提一下,#FFF肯定就是纯白色了。

在本案例中,我们将背景色设置为纯黑色。

3.制作3D相框

我们我们画一个id为photos的div作为相框来装载所有的图片。

<div id="photos"></div>

这句话一写,页面上啥也没有,div连宽度和高度都没有,这个时候,我们就要用css来给div添加一件美丽的外衣了。

#photos{
    width:110px;            /*宽度*/
    height:180px;          /*高度*/
    border:1px solid #ccc;  /*加一个灰色边框*/
    margin:160px auto;     /*水平居中,高度距离顶部100px*/
}

Paste_Image.png

这样还是平面的效果,没有3D的感觉,如果你不相信,我们可以用transform属性让它沿着Y轴起来,看看是不是3D的。

transform:rotateY(0deg);

这句话表示将div盒子沿着Y轴旋转0度。

让我们用谷歌浏览器打开(或者其他浏览器,不要太老就行),打开调试模式(大部分浏览器都是直接按一下F12就可以了),进入这样的界面。

按一下这里的箭头,就可以查看dom元素了。
Paste_Image.png

把鼠标滑到div上,点击。
Paste_Image.png

然后右边就会出来这样的界面,里面有这个div所有的样式。
Paste_Image.png

我们找到 transform:rotateY(0deg); 这一行,然后可以动态地改变它的值,我们点几下,选中 0deg 这几个字,再按键盘上的向上箭头,就会这样:

rotate.gif

哇,转起来了,好神奇!

我当初知道有这么个名堂的时候,心里就特别兴奋。

这还是2D的,没有3D效果,如何添加3D效果呢?

我们加上这两个属性,

transform-style:preserve-3d;/*设置3d环境*/
perspective:800px;      /*设置景深为800px*/

所谓的景深, 简单说来,就是对好焦的范围。它能决定是把背景模糊化来突出拍摄对象,还是拍出清晰的背景。我看到网上是这么说的,喜欢摄影的朋友应该很了解。

为了突出效果,我们添加一张图片,顺便给图片加上一点倒影效果。

<div id="photos">
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg"></img>
</div>
#photos img{
    width:100%;
    height:100%;
    position:absolute;
    box-shadow:0 0 8px #eaeaea;
    box-shadow: 1px -1px 6px #666;
    border-radius:4px;
    -webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));
    cursor:pointer;
}

效果:

rotate.gif

看起来有点效果了吧。

我一共准备了8张图片,现在将剩余的图片也添加进来。

<div id="photos">
      <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="2.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="3.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="4.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="5.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="6.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="7.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="8.jpg"></img>

</div>

到目前为止,所有的图片都是叠在一起的,我们思考如何将他们分散开来,围城一圈呢?

4.将图片散开,围成一圈

在3维坐标中,不仅有X轴,Y轴,还有Z轴。我们首先要明白Z轴是什么概念,Y轴是左右旋转,上面已经演示过了,不难想到X轴应该就是上下旋转,那么Z轴呢?

我们先把倒影去掉,看起来清楚些。

/*-webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));*/

好,让我们来一探究竟:

rotate.gif

哇,原来如此!

Z轴就是垂直于横切面的一条轴!

我们现在不需要绕着Z轴旋转,试试让相册沿着Z轴移动一段距离如何?

translateZ可以帮我们实现这一个效果。

回到正题。

我们的目的是让所有的图片分散开来,那么第一步就是让每一张图片均匀地根据Y轴转过一个角度。这个角度是多少呢?

一圈是360度,除以图片的张数,就是每一张图片转过的角度了。

我们用js来实现:

var photosDom = document.getElementById('photos');
//获取图片数组
var images = photosDom.getElementsByTagName('img'); 
//获取图片数量
var len = images.length;        
//计算每张图片按Y轴旋转的角度 
var deg = Math.floor(360 / len);                    
for(var i = 0; i < len;i++){
    images[i].style = 'transform : rotateY(' + deg * i + 'deg)'; //deg前面不要加空格
}

代码是比较明了的,就是一个除法运算,然后给每一张图片增加一个旋转样式即可。

效果:

Paste_Image.png

可见,每一张图片都转过了一定的角度。

也就是说,这个时候,每张图片的Z轴都不一样了!

如果你还是觉得有难度,没关系,我们拿其中一张图片来举例,让它沿着它自己的Z轴向外移动。然后你就明白了。

for(var i = 0; i < len;i++){
    images[i].style = 'transform : rotateY(' + deg * i + 'deg)'; //deg前面不要加空格

    if(i == 1){
        images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(300px)';
    }
}

Paste_Image.png

显而易见了,就是这么回事,那么解决方案自己就出来了,我们只需要在每一张图片根据Y轴旋转的时候,就让它沿着Z轴“飘”出来就可以啦!

距离稍微大一点,就380px吧。

for(var i = 0; i < len;i++){
    images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(380px)'; //deg前面不要加空格
}

Paste_Image.png

这样有点太水平了,我们让整个相册往下一点,达到一种稍微有点俯视的效果。让相册根据X轴往下移动个10px就可以了哦。

transform:rotateX(-10deg);

Paste_Image.png

这样效果就出来了。

5.绘制透明酷炫底盘

本案例中,在相册底部,还有一个透明的底盘,现在我们开始实现这个效果。

<div id="photos">
      <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="2.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="3.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="4.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="5.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="6.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="7.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="8.jpg"></img>
    <div></div>
</div>

其实,它就是一个放在photos里面的div。我们通过定位布局和css3特性就可以实现了。

上代码:

#photos div{
    width:1200px;
    height:1200px;
    border-radius:50%;
    position:absolute;
    top:102%;
    left:50%;
    margin-left:-600px;
    margin-top:-600px;
    transform:rotateX(90deg);
    background:-webkit-radial-gradient(center center,600px 600px,rgba(158,158,222,0.5),rgba(0,0,0,0));
}

top属性是一点点调出来的,你也可以用浏览器的调试模式一点点来调整高度。

效果:

Paste_Image.png

6.自动旋转

最后一步,还是由js代码来收尾,我们使用js的定时器setInterval,每隔30毫秒就让整个相册转过一个非常小的角度就行了。

var x = 0;
setInterval(function(){
    photosDom.style.transform = "rotateX(-10deg) rotateY("+ (x++) * 0.2 +"deg)";
},30);

代码应该还是比较明了的。

最终效果就出来了:

rotate.gif

今天做了一点小修改,我把photos的margin由之前的100px auto变为160px auto了。

从效果来看,相册在旋转的过程中,会有一定的偏移,虽然我个人觉得这样的效果也挺有趣的,不过,如果你不希望它的位置发生偏移的话,只需要在photos外边在逃一层div,然后把景深移到外层div就ok啦。

免责声明: 博客中所有的图片素材均来自百度搜索,仅供学习交流,如有问题请联系我,侵立删,谢谢。

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

48人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 分销返利 帮助中心 APP下载
官方微信

举报

0/150
提交
取消