时间：2023-07-26 12:21:01 | 来源：网站运营
时间：2023-07-26 12:21:01 来源：网站运营
三分钟学会用 js + css3 打造酷炫3D相册：中秋主题的3D旋转相册
在线咨询
<!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，确保中文可以正常显示。*{padding:0px;margin:0px;} /*这是为了消除默认dom元素的内外边距，使得我们写css的时候更精确*/body{background:#000;}#######000是纯黑色<div id="photos"></div>这句话一写，页面上啥也没有，div连宽度和高度都没有，这个时候，我们就要用css来给div添加一件美丽的外衣了。#photos{ width:110px; /*宽度*/ height:180px; /*高度*/ border:1px solid #ccc; /*加一个灰色边框*/ margin:160px auto; /*水平居中，高度距离顶部100px*/}transform:rotateY(0deg);这句话表示将div盒子沿着Y轴旋转0度。transform-style:preserve-3d;/*设置3d环境*/perspective:800px; /*设置景深为800px*/所谓的景深， 简单说来，就是对好焦的范围。它能决定是把背景模糊化来突出拍摄对象，还是拍出清晰的背景。我看到网上是这么说的，喜欢摄影的朋友应该很了解。<div id="photos"> <img src="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;}效果：<div id="photos"> <img src="1.jpg"></img> <img src="2.jpg"></img> <img src="3.jpg"></img> <img src="4.jpg"></img> <img src="5.jpg"></img> <img src="6.jpg"></img> <img src="7.jpg"></img> <img src="8.jpg"></img></div>到目前为止，所有的图片都是叠在一起的，我们思考如何将他们分散开来，围城一圈呢?/*-webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));*/好，让我们来一探究竟：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前面不要加空格}代码是比较明了的，就是一个除法运算，然后给每一张图片增加一个旋转样式即可。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)'; }}for(var i = 0; i < len;i++){ images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(380px)'; //deg前面不要加空格}transform:rotateX(-10deg);<div id="photos"> <img src="1.jpg"></img> <img src="2.jpg"></img> <img src="3.jpg"></img> <img src="4.jpg"></img> <img src="5.jpg"></img> <img src="6.jpg"></img> <img src="7.jpg"></img> <img src="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属性是一点点调出来的，你也可以用浏览器的调试模式一点点来调整高度。var x = 0;setInterval(function(){ photosDom.style.transform = "rotateX(-10deg) rotateY("+ (x++) * 0.2 +"deg)";},30);代码应该还是比较明了的。作者： 剽悍一小兔
链接：http://www.imooc.com/article/22632
来源：慕课网
关键词：打造,相册,学会
