【HTML+CSS+JS】前端三剑客实现3D旋转照片墙

最近大家应该都对3D照片墙很心动吧，赶快拿走给女朋友制作一个，让她知道代码的浪漫

源码如下：

1.把html 文件和img文件放在同级目录下

2.照片格式要注意是否一致哦

<!DOCTYPE html>
<html lang="en" ondragstart="return false"><head><meta charset="UTF-8"><meta name="Keywords" content=""><meta name="Description" content=""><title>3D旋转照片墙</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;/* border: 1px solid red; */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;/* webkit */}/* 照片底座 */.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;/* 沿着x轴按倒 */transform: rotateX(90deg);}</style>
</head><body><!-- 盒子容器 --><div class="perspective"><div class="wrap" id="imgwrap"><!-- 引入图片值页面 --><img class="f1" src="img/12.png" /><img class="f1" src="img/13.png" /><img class="f1" src="img/14.png" /><img class="f1" src="img/15.png" /><img class="f1" src="img/16.png" /><img class="f1" src="img/1.png" /><img class="f1" src="img/2.png" /><img class="f1" src="img/3.png" /><img class="f1" src="img/4.png" /><img class="f1" src="img/5.png" /><img class="f1" src="img/6.png" /><img class="f1" src="img/7.png" /><img class="f1" src="img/5.png" /><img class="f1" src="img/6.png" /><img class="f1" src="img/7.png" /><img class="f1" src="img/8.png" /><img class="f1" src="img/9.png" /><img class="f1" src="img/10.png" /><img class="f1" src="img/11.png" /><img class="f1" src="img/17.png" /><img class="f1" src="img/18.png" /><img class="f1" src="img/19.png" /><img class="f1" src="img/20.png" /><img class="f1" src="img/21.png" /><img class="f1" src="img/22.png" /><img class="f1" src="img/23.png" /><img class="f1" src="img/24.png" /><img class="f1" src="img/25.png" /><img class="f1" src="img/26.png" /><img class="f1" src="img/27.png" /><img class="f1" src="img/28.png" /><img class="f1" src="img/29.png" /><img class="f1" src="img/30.png" /><!-- 引入图片值页面 --><img class="f2" src="img/1.png" /><img class="f2" src="img/2.png" /><img class="f2" src="img/3.png" /><img class="f2" src="img/4.png" /><img class="f2" src="img/5.png" /><img class="f2" src="img/9.png" /><img class="f2" src="img/10.png" /><img class="f2" src="img/11.png" /><img class="f2" src="img/12.png" /><img class="f2" src="img/25.png" /><img class="f2" src="img/26.png" /><img class="f2" src="img/27.png" /><img class="f2" src="img/28.png" /><img class="f2" src="img/29.png" /><img class="f2" src="img/30.png" /><img class="f2" src="img/13.png" /><img class="f2" src="img/14.png" /><img class="f2" src="img/15.png" /><img class="f2" src="img/16.png" /><img class="f2" src="img/17.png" /><img class="f2" src="img/18.png" /><img class="f2" src="img/19.png" /><img class="f2" src="img/20.png" /><img class="f2" src="img/21.png" /><img class="f2" src="img/22.png" /><img class="f2" src="img/23.png" /><img class="f2" src="img/24.png" /><img class="f2" src="img/6.png" /><img class="f2" src="img/7.png" /><img class="f2" src="img/5.png" /><img class="f2" src="img/6.png" /><img class="f2" src="img/7.png" /><img class="f2" src="img/8.png" /><!-- 引入图片值页面 --><img class="f3" src="img/1.png" /><img class="f3" src="img/2.png" /><img class="f3" src="img/11.png" /><img class="f3" src="img/12.png" /><img class="f3" src="img/25.png" /><img class="f3" src="img/26.png" /><img class="f3" src="img/27.png" /><img class="f3" src="img/3.png" /><img class="f3" src="img/4.png" /><img class="f3" src="img/5.png" /><img class="f3" src="img/16.png" /><img class="f3" src="img/17.png" /><img class="f3" src="img/18.png" /><img class="f3" src="img/10.png" /><img class="f3" src="img/28.png" /><img class="f3" src="img/29.png" /><img class="f3" src="img/30.png" /><img class="f3" src="img/13.png" /><img class="f3" src="img/19.png" /><img class="f3" src="img/20.png" /><img class="f3" src="img/21.png" /><img class="f3" src="img/22.png" /><img class="f3" src="img/23.png" /><img class="f3" src="img/24.png" /><img class="f3" src="img/9.png" /><img class="f3" src="img/14.png" /><img class="f3" src="img/15.png" /><img class="f3" src="img/6.png" /><img class="f3" src="img/7.png" /><img class="f3" src="img/5.png" /><img class="f3" src="img/6.png" /><img class="f3" src="img/7.png" /><img class="f3" src="img/8.png" /><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) {// 旋转并沿Z轴平移ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";//过渡时间1sele.style.transition = "1s " + (len - index) * 0.1 + "s";});Array.prototype.forEach.call(oImg2, function (ele, index, self) {// 旋转并沿Z轴平移ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";//过渡时间1sele.style.transition = "1s " + (len - index) * 0.1 + "s";});Array.prototype.forEach.call(oImg3, function (ele, index, self) {// 旋转并沿Z轴平移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) {//       // 旋转并沿Z轴平移//       ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";//       //过渡时间1s//       ele.style.transition = "1s " + (len - index) * 0.1 + "s";// });}//翻动3D相册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>

成功了别忘了三连嗷~

【HTML+CSS+JS】前端三剑客实现3D旋转照片墙相关推荐

HTML+CSS+JS实现 ❤️爱心文字3D旋转动画特效❤️
如何用css实现一个3D旋转照片墙
一.前言学习前端是件很有趣的事,今天我又来分享一下关于html+css实现的3D效果的照片墙的代码啦,希望感兴趣的小伙伴会喜欢! 正文: 今天,我们要做一个3D旋转相册,首先让我们了 ...
HTML+CSS+JS 实现抖音3D炫酷相册? 创意网页小礼物了解一下呗？（纪念日的小浪漫）
为心爱的人做一个超具创意的网页生日祝福吧❤(飘动爱心3D相册)HTML+CSS+JavaScript 是不是还没有给心爱的人准备小礼物呀,但是别担心,精心创作了一个"飘动爱心3D相册&quo ...
520情人节程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)
❉ 来自程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)可自定义编辑文字一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白,是不是要给 ...
Web前端：HTML+CSS+JS实现美女照片3D立方体旋转
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有个 ...
【前端领域】3D旋转超美相册（HTML+CSS）
世界上总有一半人不理解另一半人的快乐. --<爱玛> 目录一.前言二.本期作品介绍 3D旋转相册三.效果展示四.详细介绍五.编码实现 index.html style.css i ...
HTML5,CSS,JS前端常见知识面试题
css中单位px,em,rem的区别 (1)px 是长度单位,它是相对于显示器屏幕分辨率而言的.比较稳定和精确,但在浏览器中放大或缩放浏览器页面时会出现页面混乱的情况. (2)em 是相对长度单位.e ...
H5+css+js前端特效源代码：发光动画按钮：上传按钮
前端特效:发光动画按钮:上传按钮 H5+CSS+JS 骨架+皮肤+功能效果展示源代码: H5部分: <!DOCTYPE html> <html lang="en&quo ...
利用css的rotate()做一个3d旋转图集
视频效果: 3d旋转图集思路: 1.要完成这个作品我们一定要理解变形原点的概念,因为要将4张图片形成图中所示的效果,我们一定要改变变形在z轴上的位置,然后使用rotate()形成一个类似于旋转木马一 ...

【HTML+CSS+JS】前端三剑客实现3D旋转照片墙

【HTML+CSS+JS】前端三剑客实现3D旋转照片墙相关推荐

最新文章

热门文章