实现3D照片墙效果

2023-11-18

<!DOCTYPE html>
<html lang="en" ondragstart="return false">

<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>wyc-3D照片墙</title>
	<link rel="shortcut icon" href="程序员头像.ico" type="image/x-icon">
	<link rel="stylesheet" href="./程序员头像.ico">
	<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 src="./img/1 .jpg" alt="" class="f1">
			<img src="./img/2 .jpg" alt="" class="f1">
			<img src="./img/3 .jpg" alt="" class="f1">
			<img src="./img/4 .jpg" alt="" class="f1">
			<img src="./img/5 .jpg" alt="" class="f1">
			<img src="./img/6 .jpg" alt="" class="f1">
			<img src="./img/7 .jpg" alt="" class="f1">
			<img src="./img/8 .jpg" alt="" class="f1">
			<img src="./img/9 .jpg" alt="" class="f1">
			<img src="./img/10 .jpg" alt="" class="f1">
			<img src="./img/11 .jpg" alt="" class="f1">
			<img src="./img/12 .jpg" alt="" class="f1">
			<img src="./img/13 .jpg" alt="" class="f1">
			<img src="./img/14 .jpg" alt="" class="f1">
			<img src="./img/15 .jpg" alt="" class="f1">
			<img src="./img/16 .jpg" alt="" class="f1">
			<img src="./img/17 .jpg" alt="" class="f1">
			<img src="./img/18 .jpg" alt="" class="f1">
			<img src="./img/19 .jpg" alt="" class="f1">
			<img src="./img/20 .jpg" alt="" class="f1">
			<img src="./img/21 .jpg" alt="" class="f1">
			<img src="./img/22 .jpg" alt="" class="f1">
			<img src="./img/23 .jpg" alt="" class="f1">
			<img src="./img/24 .jpg" alt="" class="f1">
			<img src="./img/25 .jpg" alt="" class="f1">
			<img src="./img/26 .jpg" alt="" class="f1">
			<img src="./img/27 .jpg" alt="" class="f1">
			<img src="./img/28 .jpg" alt="" class="f1">
			<img src="./img/29 .jpg" alt="" class="f1">
			<img src="./img/30 .jpg" alt="" class="f1">


			<img src="./img/31 .jpg" alt="" class="f2">
			<img src="./img/32 .jpg" alt="" class="f2">
			<img src="./img/33 .jpg" alt="" class="f2">
			<img src="./img/34 .jpg" alt="" class="f2">
			<img src="./img/35 .jpg" alt="" class="f2">
			<img src="./img/36 .jpg" alt="" class="f2">
			<img src="./img/37 .jpg" alt="" class="f2">
			<img src="./img/38 .jpg" alt="" class="f2">
			<img src="./img/39 .jpg" alt="" class="f2">
			<img src="./img/40 .jpg" alt="" class="f2">
			<img src="./img/41 .jpg" alt="" class="f2">
			<img src="./img/42 .jpg" alt="" class="f2">
			<img src="./img/43 .jpg" alt="" class="f2">
			<img src="./img/44 .jpg" alt="" class="f2">
			<img src="./img/45 .jpg" alt="" class="f2">
			<img src="./img/46 .jpg" alt="" class="f2">
			<img src="./img/47 .jpg" alt="" class="f2">
			<img src="./img/48 .jpg" alt="" class="f2">
			<img src="./img/49 .jpg" alt="" class="f2">
			<img src="./img/50 .jpg" alt="" class="f2">
			<img src="./img/51 .jpg" alt="" class="f2">
			<img src="./img/52 .jpg" alt="" class="f2">
			<img src="./img/53 .jpg" alt="" class="f2">
			<img src="./img/54 .jpg" alt="" class="f2">
			<img src="./img/55 .jpg" alt="" class="f2">
			<img src="./img/56 .jpg" alt="" class="f2">
			<img src="./img/57 .jpg" alt="" class="f2">
			<img src="./img/58 .jpg" alt="" class="f2">
			<img src="./img/59 .jpg" alt="" class="f2">
			<img src="./img/60 .jpg" alt="" class="f2">





			<img src="./img/61 .jpg" alt="" class="f3">
			<img src="./img/62 .jpg" alt="" class="f3">
			<img src="./img/63 .jpg" alt="" class="f3">
			<img src="./img/64 .jpg" alt="" class="f3">
			<img src="./img/65 .jpg" alt="" class="f3">
			<img src="./img/66 .jpg" alt="" class="f3">
			<img src="./img/67 .jpg" alt="" class="f3">
			<img src="./img/68 .jpg" alt="" class="f3">
			<img src="./img/69 .jpg" alt="" class="f3">
			<img src="./img/70 .jpg" alt="" class="f3">
			<img src="./img/71 .jpg" alt="" class="f3">
			<img src="./img/72 .jpg" alt="" class="f3">
			<img src="./img/73 .jpg" alt="" class="f3">
			<img src="./img/74 .jpg" alt="" class="f3">
			<img src="./img/75 .jpg" alt="" class="f3">
			<img src="./img/76 .jpg" alt="" class="f3">
			<img src="./img/77 .jpg" alt="" class="f3">
			<img src="./img/78 .jpg" alt="" class="f3">
			<img src="./img/79 .jpg" alt="" class="f3">
			<img src="./img/80 .jpg" alt="" class="f3">
			<img src="./img/81 .jpg" alt="" class="f3">
			<img src="./img/82 .jpg" alt="" class="f3">
			<img src="./img/83 .jpg" alt="" class="f3">
			<img src="./img/84 .jpg" alt="" class="f3">
			<img src="./img/85 .jpg" alt="" class="f3">
			<img src="./img/86 .jpg" alt="" class="f3">
			<img src="./img/87 .jpg" alt="" class="f3">
			<img src="./img/88 .jpg" alt="" class="f3">
			<img src="./img/89 .jpg" alt="" class="f3">
			<img src="./img/90 .jpg" alt="" class="f3">
			<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;
		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)";
				//过渡时间1s
				ele.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)";
				//过渡时间1s
				ele.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)";
				//过渡时间1s
				ele.style.transition = "1s " + (len - index) * 0.1 + "s";
			});
		}
		//翻动3D相册
		var newX, newY, lastX, lastY, minusX, minusY, rotX = -20,
			rotY = 0;


		// 定时移动函数
		function timing() {
			return setInterval(() => {
				rotY -= 1 * 0.1;
				oWrap.style.transform = "rotateX(" + rotX + "deg)  rotateY(" + rotY + "deg)";
				lastY = newY;
			}, 10);
		}

		// 开始定时移动
		var setInter = timing();

		// 鼠标摁下时
		document.onmousedown = function (e) {
			// 鼠标按下时需要暂停移动
			clearInterval(setInter)
			clearInterval(this.setInter)

			// 点击设置初值
			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; //清除鼠标移动
				// 松开时触发定时移动
				this.setInter = timing();
			}
		}
	</script>

	<!-- 调用灯笼挂件 -->
	<script src="https://cdn.jsdelivr.net/gh/fz6m/china-lantern@1.1/dist/china-lantern.min.js"></script>
</body>

</html>

展示效果：

3D照片墙

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

3d

CSS3

css

实现3D照片墙效果的相关文章

:target 伪类在 Firefox 中无法正常工作

我正在使用 target 伪类制作一个具有 CSS 灯箱类型效果的页面当您单击图像时会弹出一个包含信息的框当您单击任意位置时该框会再次消失它在 Chrome 和 IE 中运行良好但在 Firefox 中存在一个奇怪的错误当您将鼠
横向旋转到纵向时的字体大小怪异 - CSS 媒体查询 - iPhone5 Safari

我已经用谷歌搜索了这个但无法弄清楚谢谢你的帮助 Studiolynch com 响应式和流体布局在 iphone 5 Safari 中完美运行除了从横向模式旋转到纵向模式会使字体大小小于应有的大小但是如果您最初以纵向模式加载页面
扩展引导程序预输入的宽度以匹配输入字段

我知道这个问题之前至少被问过三次但我看到的答案并不是我想要的我希望增加 twitter bootstrap 通过其 typeahead 功能生成的自动完成字段的宽度我一直在读到它延伸到覆盖该字段中的所有文本也就是说文本越长自动完
ReactJS 水平对齐material-ui 元素

我试图在文本输入旁边有一个单选按钮这样用户基本上可以输入问题的答案并标记一个首选答案然而 Material UI 将每个都放在自己的行上这就是我目前所拥有的 div div
Chrome 中的错误或 CSS 错误？（隐藏可见性的锚点）

在任何 HTML 中测试这个简单的行 a href anything span insible text here span a 您可以直接从这里测试 http jsfiddle net wqS3E http jsfiddle net wq
css 字体 twitter 像关闭按钮一样，我错过了什么？

twitter 有一个关闭按钮它是单个字符 x 我需要类似的东西但是在我检查之后 span x span 我按照 firebug 告诉我的那样创建 css 规则 close button font family Tahoma Arial
使用 jQuery 检测容器溢出？

我见过这个问题 https stackoverflow com questions 2059743 detect elements overflow using jquery但感觉必须有一个更干净的 jQuery 方法来做到这一点我什
新BFC“清”浮箱

如示例所示应用display inline block 到包含块似乎清除了其中的浮动框 wrapper inline block display inline block left column background color te
左对齐图像和居中文本在 div 内的同一级别？

HTML br div class UpperTitle img src align left CableSolve Web Dashboard Version 0 1 1 div br CSS UpperTitle text align
window.open 使用 css 样式

我想设计我的 window open 目前我的网页上有一些项目由于解析了某个类而打开然后在新窗口中打开指定的文本我想更改字体大小字体和填充等这是我的 JavaScript 代码
IE9-11 检测变换样式：preserve-3d

我为一个项目制作了一个 3d 类型的菜单自然 IE 会引起问题因为 IE10 即使 3d 变换工作也不支持变换样式 preserve 3d 我尝试了解决方法通过对 3d 菜单容器的每个子元素应用变换但至少可以说动画看起来很糟糕
与 960.gs 的列高度相同吗？

我有一排 4 列根据我在每一列中放入的信息量它们将具有不同的高度如果你给它们加上背景颜色你就可以看到我如何给其他列最大高度的列的高度您可以使用 jQuery 来执行此操作 http www cssnewbie com equal
Jquery $(window).width() 不包括滚动条宽度？

我有一个页面使用 javascript 设置了很多 css 属性并使用 window width 来确定页面宽度除此之外它还使用该方法将一些 div 宽度设置为页面的完整宽度 A 这样做是因为很多其他计算都是在 javascript
::after 内联 HTML 电子邮件？

banner width 34px height 52px position relative color white font size 11px letter spacing 0 2em text align center float
CSS 选择器：Active 不适用于 IE8 中的子元素单击

我有以下 HTML 结构 div class wrapper div class control clickable img src logo png div div 以及以下 CSS control border 1px solid 00
CSS 边框底部的曲线

我需要 CSS 中的这个图像并且在这个边框内需要一个背景图像我努力了 border radius 0 0 50 50 webkit border radius 0 0 50 50 但没有得到所需的形状任何帮助将不胜感激边界半径您
a：悬停颜色不起作用

一件很奇怪的事情我想在悬停时更改链接的文本颜色和背景颜色这是代码 css link menu a color white display block height 100 width 100 text decoration none t
在球体边缘绘制点

因此来自 Flash 背景的我对一些简单的 2D 三角函数有很好的理解在带有 I 圆的二维中我知道使用给定角度和半径将项目放置在边缘上的数学 x cos a r y sin a r 现在如果我在 3d 空间中有一个点我知道球体的半
在 Chrome 中隐藏 HTML 时间输入字段上的图标

在 Chrome 中当您type time 属性到输入框您会在输入旁边看到一个小图标时钟图标有没有办法去掉这个小时钟图标基于这个问题的答案将日期输入三角形更改为日历图标 https stackoverflow com questi
在javascript中创建图像的缩略图方块（不丢失纵横比）

我正在制作一个客户端拖放文件上传脚本作为书签在上传之前我使用 File API 将图像读取为 base64 格式并将其显示为缩略图 This is how my thumbnails look like I want them to l

随机推荐

JS函数（二）基础 return 返回值

创建函数 function 函数名形参变量列表函数体 return 返回值 return 1 什么是返回 return语句将终止当前函数并返回当前函数的值 2 为什么要用我们先来看一组代码
matlab矩阵（一）--如何控制矩阵中小数点的位数

format 设置输出格式对浮点性变量缺省为format short format并不影响matlab如何计算和存储变量的值对浮点型变量的计算即单精度或双精度按合适的浮点精度进行而不论变量是如何显示的对整型变量采用整型数据整型
汤姆·克鲁斯 - 电影全集

1 熄灯号 Taps 1981 导演哈诺德贝克编剧 Darryl Ponicsan Devery Freeman James Lineberger主演乔治 C 斯科特蒂莫西赫顿罗尼考克斯西恩潘汤姆克鲁斯伊万汉德勒
HLS图像处理系列——在ZEDBoard搭建DDR图像处理通路

ZYNQ芯片内包含一个丰富特性的基于双核ARM Cortex A9的处理子系统 Processing System PS 和Xilinx 28nm可编程逻辑 Programmable Logic PL PS除了核心外还包括片上存储器外部存
端口扫描程序nmap使用手册

摘要 nmap是一个网络探测和安全扫描程序系统管理者和个人可以使用这个软件扫描大型的网络获取那台主机正在运行以及提供什么服务等信息 nmap支持很多扫描技术例如 UDP TCP connect TCP SYN 半开扫描 ftp代理 b
[原创]Discuz!NT1.1高亮代码插件1.5稳定版！

Discuz NT 1 1高亮代码插件FOR NET2 0 作者 winson 版本 1 5稳定版支持网站 http bbs szblogs com 功能为论坛增加高亮代码显示类似cnblogs的形式一 1 5版修复的问题之前发布
cgi和fastcgi获取所有环境变量（C语言）

参考 http blog chinaunix net uid 620765 id 2084386 html 还记得C语言main函数的完整声明吗 int main int argc char argv char envp 这个就是c语言中m
c语言解惑 ----读书笔记

c语言解惑前言左值和右值首地址没有初始化指针和空指针指针的初始化小段存储和大端存储数组函数文件结构多文件结构多文件中的函数设计头文件前言面试过程中发现自己确实对于c和c 实现的原理了解得不够深入因此借书以解惑
IE和FF下查看HTTP头文件信息的插件

通过这2个插件可以获得服务器返回的页面header信息对于解析web服务器的工作情况非常有帮助如查看gzip压缩是否成功及html文件的大小 iehttpheaders下载地址 http www blunck se iehttphead
论文阅读Sentence-BERT: Sentence Embeddings using Siamese BERT-Networks

论文信息题目 Sentence Embeddings using Siamese BERT Networks 使用孪生BERT网络结构的句子嵌入作者 Nils Reimers Iryna Gurevych 论文水平 EMNLP 2019
工程师必知的代码重构指南

作者 CATE LAWRENCE 译者冬雨策划蔡芳芳本指南将带你了解进行代码重构的好处可能遇到的挑战可以采用的工具和最佳实践以及重构和技术债务之间的区别我们都在寻找清理代码降低复杂性和改进功能的方法重构就是其中之一本指
mongoDB操作命令大全，掌握最常用的命令

目录添加操作查询操作复合主键逻辑操作符匹配文档游标文档投影更新操作删除操作添加操作 db 集合 insertOne
面试题二：谈一谈对JavaScript中for in与for of的理解

for in for in 语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性包括继承的可枚举属性在没有深度了解过for in的作用前我只停留在它能够遍历对象键和数组下标的的层面上那现在就来探究什么是一个对象中的Symbol
配置centos虚拟机以及虚拟机联网问题

文章目录在VMware中创建虚拟机创建虚拟机安装centons 7 难点网络配置在VMware中创建虚拟机创建虚拟机安装centons 7 本文以centos 7 64位为例各位需要下载centos 7的iso文件下载地址
[网络]公共网络安全漏洞库：CVE/CNCVE

1 前言以网络安全行业中最大的影响范围最广的CVE为例 CVE 的英文全称是 Common Vulnerabilities Exposures 通用漏洞披露 CVE就好像是一个字典表为广泛认同的信息安全漏洞或者已经暴露出来的弱点给出一
【数据库】redis数据持久化

目录数据持久化一 RDB 1 什么是RDB 2 持久化流程 3 相关配置案例演示 4 备份和恢复 1 备份 2 恢复 3 优势 4 劣势二 AOF 1 什么是AOF 2 持久化流程 3 使用AOF 1 开启AOF 2 使用演示 3
SDAutoLayout的使用方法

Cell高度自适应 label文字自适应 1 gt gt 设置cell高度自适应 cell 布局设置好之后调用此方法就可以实现高度自适应注意如果用高度自适应则不要再以cell的底边为参照去布局其子view cell setupAutoH
IC封装——从基本概念到TSV

一 IC封装在之前文章中有大致提过封装这里展开讲讲芯片生产流程沧海一升的博客 CSDN博客每个半导体产品的制造都需要数百个工艺泛林集团将整个制造过程分为八个步骤晶圆加工氧化光刻刻蚀薄膜沉积互连测试封装芯片生产流程
【Unix 网络编程】TCP状态转换图详解

在前面已经介绍了TCP协议的三路握手和四次挥手如下图所示 TCP通信过程包括三个步骤建立TCP连接通道三次握手数据传输断开TCP连接通道四次挥手这里进一步探究TCP三路握手和四次挥手过程中的状态变迁以及数据传输过程先看TC
实现3D照片墙效果

实现3D照片墙效果

实现3D照片墙效果 的相关文章

随机推荐

热门标签

实现3D照片墙效果的相关文章