抖音超火的3d照片墙，h5+css3+js实现

如图所示，利用动画过滤和3d旋转

<!DOCTYPE html>
<html lang="en" ondragstart="return false"><head><meta charset="UTF-8"><meta name="Keywords" content=""><meta name="Description" content=""><title>my program</title><style type="text/css">* {margin: 0;padding: 0;}body {background: #222;overflow: hidden;user-select: none;}@keyframes rotate {100% {transform: rotateY(360deg);}}.perspective {perspective: 600px;}.wrap {/* 3d */width: 135px;height: 240px;margin: 100px auto;position: relative;transform: rotateX(-20deg) rotateY(0deg);transform-style: preserve-3d;}.wrap img {display: block;position: absolute;width: 100%;height: 100%;transform: rotateY(0deg) translateZ(0px);background: transparent;box-shadow: 0 0 4px #fff;border-radius: 5px;}.wrap p {width: 1200px;height: 1200px;background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));position: absolute;border-radius: 50%;left: 50%;top: 100%;margin-left: -600px;margin-top: -600px;transform: rotateX(90deg);}</style>
</head><body><div class="perspective"><div class="wrap" id="imgwrap"><img class="f1" src="img/12.jpg" /><img class="f1" src="img/13.jpg" /><img class="f1" src="img/14.jpg" /><img class="f1" src="img/15.jpg" /><img class="f1" src="img/16.jpg" /><img class="f1" src="img/1.jpg" /><img class="f1" src="img/2.jpg" /><img class="f1" src="img/3.jpg" /><img class="f1" src="img/4.jpg" /><img class="f1" src="img/5.jpg" /><img class="f1" src="img/6.jpg" /><img class="f1" src="img/7.jpg" /><img class="f1" src="img/5.jpg" /><img class="f1" src="img/6.jpg" /><img class="f1" src="img/7.jpg" /><img class="f1" src="img/8.jpg" /><img class="f1" src="img/9.jpg" /><img class="f1" src="img/10.jpg" /><img class="f1" src="img/11.jpg" /><img class="f1" src="img/17.jpg" /><img class="f1" src="img/18.jpg" /><img class="f1" src="img/19.jpg" /><img class="f1" src="img/20.jpg" /><img class="f1" src="img/21.jpg" /><img class="f1" src="img/22.jpg" /><img class="f1" src="img/23.jpg" /><img class="f1" src="img/24.jpg" /><img class="f1" src="img/25.jpg" /><img class="f1" src="img/26.jpg" /><img class="f1" src="img/27.jpg" /><img class="f1" src="img/28.jpg" /><img class="f1" src="img/29.jpg" /><img class="f1" src="img/30.jpg" /><img class="f2" src="img/1.jpg" /><img class="f2" src="img/2.jpg" /><img class="f2" src="img/3.jpg" /><img class="f2" src="img/4.jpg" /><img class="f2" src="img/5.jpg" /><img class="f2" src="img/9.jpg" /><img class="f2" src="img/10.jpg" /><img class="f2" src="img/11.jpg" /><img class="f2" src="img/12.jpg" /><img class="f2" src="img/25.jpg" /><img class="f2" src="img/26.jpg" /><img class="f2" src="img/27.jpg" /><img class="f2" src="img/28.jpg" /><img class="f2" src="img/29.jpg" /><img class="f2" src="img/30.jpg" /><img class="f2" src="img/13.jpg" /><img class="f2" src="img/14.jpg" /><img class="f2" src="img/15.jpg" /><img class="f2" src="img/16.jpg" /><img class="f2" src="img/17.jpg" /><img class="f2" src="img/18.jpg" /><img class="f2" src="img/19.jpg" /><img class="f2" src="img/20.jpg" /><img class="f2" src="img/21.jpg" /><img class="f2" src="img/22.jpg" /><img class="f2" src="img/23.jpg" /><img class="f2" src="img/24.jpg" /><img class="f2" src="img/6.jpg" /><img class="f2" src="img/7.jpg" /><img class="f2" src="img/5.jpg" /><img class="f2" src="img/6.jpg" /><img class="f2" src="img/7.jpg" /><img class="f2" src="img/8.jpg" /><img class="f3" src="img/1.jpg" /><img class="f3" src="img/2.jpg" /><img class="f3" src="img/11.jpg" /><img class="f3" src="img/12.jpg" /><img class="f3" src="img/25.jpg" /><img class="f3" src="img/26.jpg" /><img class="f3" src="img/27.jpg" /><img class="f3" src="img/3.jpg" /><img class="f3" src="img/4.jpg" /><img class="f3" src="img/5.jpg" /><img class="f3" src="img/16.jpg" /><img class="f3" src="img/17.jpg" /><img class="f3" src="img/18.jpg" /><img class="f3" src="img/10.jpg" /><img class="f3" src="img/28.jpg" /><img class="f3" src="img/29.jpg" /><img class="f3" src="img/30.jpg" /><img class="f3" src="img/13.jpg" /><img class="f3" src="img/19.jpg" /><img class="f3" src="img/20.jpg" /><img class="f3" src="img/21.jpg" /><img class="f3" src="img/22.jpg" /><img class="f3" src="img/23.jpg" /><img class="f3" src="img/24.jpg" /><img class="f3" src="img/9.jpg" /><img class="f3" src="img/14.jpg" /><img class="f3" src="img/15.jpg" /><img class="f3" src="img/6.jpg" /><img class="f3" src="img/7.jpg" /><img class="f3" src="img/5.jpg" /><img class="f3" src="img/6.jpg" /><img class="f3" src="img/7.jpg" /><img class="f3" src="img/8.jpg" /><p></p></div></div><!--  src="JS/photo.js" --><script type="text/javascript">var oImg = document.getElementsByClassName('f1')var oImg2 = document.getElementsByClassName('f2')var oImg3 = document.getElementsByClassName('f3')var len = oImg.length;console.log(len)var deg = 360 / len;var oWrap = document.getElementById("imgwrap");// var oWrap=document.querySelector('.wrap');window.onload = function () {Array.prototype.forEach.call(oImg, function (ele, index, self) {ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";ele.style.transition = "1s " + (len - index) * 0.1 + "s";});Array.prototype.forEach.call(oImg2, function (ele, index, self) {ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";ele.style.transition = "1s " + (len - index) * 0.1 + "s";});Array.prototype.forEach.call(oImg3, function (ele, index, self) {ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(480px)";//过渡时间1sele.style.transition = "1s " + (len - index) * 0.1 + "s";});// Array.prototype.forEach.call(oImg, function (ele, index, self) {//       ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";//       ele.style.transition = "1s " + (len - index) * 0.1 + "s";// });}var newX, newY, lastX, lastY, minusX, minusY, rotX = -20, rotY = 0;document.onmousedown = function (e) {lastX = e.clientX;lastY = e.clientY;this.onmousemove = function (e) {newX = e.clientX;newY = e.clientY;minusX = newX - lastX;minusY = newY - lastY;rotX -= minusY * 0.2;rotY += minusX * 0.1;oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";lastX = newX;lastY = newY;}this.onmouseup = function (e) {this.onmousemove = null;}}</script>
</body></html>

代码已放出，需要可以自取

抖音超火的3d照片墙，h5+css3+js实现相关推荐

制作抖音超火的罗盘时钟(HTML+CSS+JS)
❤ 精彩专栏推荐
抖音超火的罗盘时钟效果
抖音超火的罗盘时钟利用原生js,实现的罗盘时钟效果实现效果实现思路将数字摆成圆环获取当前时间,让圆环旋转一定的角度,转到水平位置将当前时间变亮实现的思路还是很简单的,但是在过程中会有很多 ...
HTML5七夕情人节表白网页抖音超火的樱花雨3D相册 HTML+CSS+JavaScript
HTML5七夕情人节表白网页????抖音超火的樱花雨3D相册???? HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱 ...
HTML5七夕情人节表白网页(抖音超火3D炫酷魔方) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音超火❤3D炫酷魔方❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程序 ...
抖音超火3D相册——魔方版（肖战壁纸图片）
抖音超火3D相册--魔方版(肖战壁纸图片) 闲来无事,写了一个HTML5和CSS的肖战3D相册,以下奉上效果图和源代码. (PS:鼠标触碰可以显示内层六面体照片,拖动图片可以保存图片至本地.) 效果图 ...
利用JS制作抖音同款3D照片墙(three.js)
利用JS制作抖音同款3D照片墙(three.js) 520快到了,跟我一起学习threeJS 用threeJS制作抖音同款3D照片墙源码下载:3D照片墙源码下载地址
java设计九宫格拼图软件哪个好用_抖音超火的朋友圈九宫格用什么软件做的? 抖音九宫格图片制作教程...
抖音这种朋友圈九宫格用什么软件做的?最近,在抖音刷到好多这种九宫格的朋友圈截图,请问是怎么做的?突然火起来的抖音朋友圈九宫格,脚本之家小编也发现这样发朋友圈真的很好看也很有意思,特别是出去玩或者旅游拍 ...
HTML+CSS+JavaScript 制作抖音超火圣诞树
HTML+CSS+JavaScript 制作抖音超火-圣诞树视频演示圣诞树代码效果图 HTML <body marginwidth="0" marginheight=& ...
抖音最火html表白代码,抖音超火表白
喜欢的姑娘玩抖音,那你可能没用过抖音表白代码,有了抖音超火表白代码就可以让女神同意和你交往啦,虽然只是恶搞小软件,但是没准就碰到爱你的女孩儿了呢,抖音超火表白代码可能解决你的单身问题呢. 抖音表白源 ...

抖音超火的3d照片墙，h5+css3+js实现

抖音超火的3d照片墙，h5+css3+js实现相关推荐

最新文章

热门文章