3D旋转 相册

这篇具有很好参考价值的文章主要介绍了3D旋转 相册。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果展示
3D旋转 相册
代码逻辑文章来源地址https://www.toymoban.com/news/detail-444817.html

<!doctype html>
<html lang="en">
<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;
			perspective:800px;/*景深*/
		}
		#wrap{
			position:relative;
			width:120px;
			height:180px;
			margin:auto;
			transform-style:preserve-3d;/*设置3D环境*/
		}
		#wrap img{
			position:absolute;
			width:133px;
			height:200px;
			box-shadow:0 0 10px #000;
			/*倒影:朝向 偏移*/
			-webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);
			border-radius:5px;/*圆角*/
			/* transform:rotateY(0deg) translateZ(0px); */
			/*transition:1s 1s;动画执行的时间 动画延迟的时间*/
		}
		#wrap p{
			position:absolute;
			left:50%;
			top:112%;
			margin-left:-600px;
			margin-top:-600px;
			width:1200px;
			height:1200px;
			border-radius:50%;
			background:-webkit-radial-gradient(center center,600px 600px,rgba(122,122,122,0.2),rgba(0,0,0,0));
			transform:rotateX(90deg);
		}
	</style>
</head>
<body>
	<div id="wrap">
		<img src="images/1.jpg" alt="" />
		<img src="images/2.jpg" alt="" />
		<img src="images/3.jpg" alt="" />
		<img src="images/4.jpg" alt="" />
		<img src="images/5.jpg" alt="" />
		<img src="images/6.jpg" alt="" />
		<img src="images/7.jpg" alt="" />
		<img src="images/8.jpg" alt="" />
		<img src="images/9.jpg" alt="" />
		<img src="images/10.jpg" alt="" />
		<img src="images/11.jpg" alt="" />
		<p></p>
	</div>
	<script type="text/javascript">
		var oWrap = document.getElementById("wrap");
		var aImg = oWrap.getElementsByTagName("img");
		//让盒子自适应的垂直居中
		function mTop(){
			//获取浏览器窗口可视区域的高度
			var H = document.documentElement.clientHeight;
			oWrap.style.marginTop = H/2 - 180 + "px"
		}
		mTop();
		window.onresize = mTop;

		//图片初始动画
		var len = aImg.length;//获取图片的个数
		
		var Deg = 360/len;//每一张图片所占的角度
		for (var i=0;i<len;i++ )
		{
			aImg[i].style.transform = "rotateY("+i*Deg+"deg) translateZ(350px)";
			aImg[i].style.transition = "1s "+(len-1-i)*0.1+"s";
		}
		//鼠标事件(按下 移动 抬起) 拖拽旋转
		var lastX,lastY,nowX,nowY,minX,minY,roX=0,roY=0,timer;
		document.onmousedown = function(ev){
			clearInterval(timer);
			var ev = ev||window.event;
			//获取鼠标按下去的坐标位置
			lastX = ev.clientX;
			lastY = ev.clientY;
			this.onmousemove = function(ev){
				var ev = ev||window.event;
				//移动过程中鼠标的坐标位置
				nowX = ev.clientX;
				nowY = ev.clientY;
				//计算出鼠标坐标的差值
				minX = nowX - lastX;
				minY = nowY - lastY;
				//计算容器旋转的角度
				roY += minX*0.2;//roY = roY + minX*0.2
				roX -= minY*0.1;
				//console.log(roX,roY);
				//让整个图片容器跟随鼠标动
				oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)";
				lastX = nowX;
				lastY = nowY;
			}
			this.onmouseup = function(){
				this.onmousemove = null;
				this.onmouseup = null;
				timer = setInterval(function(){
					minX *=0.95;//让minX逐渐减小
					minY *=0.95;
					roY += minX*0.2;
					roX -= minY*0.1;
					oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)";
					//当minX达到足够小的值时 清楚定时器
					if (Math.abs(minX)<0.1 && Math.abs(minY)<0.1)
					{
						clearInterval(timer);
					}
				},1000/60);
			}
			return false;//阻止默认事件
		}
	</script>
</body>
</html>

到了这里,关于3D旋转 相册的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Html 3D旋转相册制作

     程序示例精选 Html 3D旋转相册制作 如需安装运行环境或远程调试,见文章底部微信名片,由专业技术人员远程协助! 这篇博客针对Html 3D旋转相册制作编写代码,代码整洁,规则,易读。 学习与应用推荐首选。           一、所需工具软件         二、使用步骤  

    2024年02月12日
    浏览(38)
  • 【前端领域】3D旋转超美相册(HTML+CSS)

    世界上总有一半人不理解另一半人的快乐。 ——《爱玛》 目录 一、前言 二、本期作品介绍    3D旋转相册 三、效果展示 四、详细介绍  五、编码实现 index.html style.css  img  六、获取源码 公众号获取源码  获取源码?私信?关注?点赞?收藏?         新的一年,我们

    2024年02月02日
    浏览(50)
  • Unity 3d角色展示脚本(旋转 平移 缩放)展示界面

    不考虑性能 很简陋的一个功能,主要是用于角色渲染的观察用,比simplecontroller要好用一点

    2024年02月11日
    浏览(56)
  • 微信小程序 - 签到打卡旋转 3D 动画功能,仿钉钉打卡签到时 “容器“ 动画翻转效果(超详细完整示例源码教程,代码简洁、丝滑流畅、示例复制即用)

    由于微信小程序的动画与普通 CSS 动画稍有不同,所以网上基本没有这方面的功能源码。 本文 实现了微信小程序开发中,类似钉钉签到打卡时的动画效果,圆形硬币形状的翻转功能, 您可以直接复制示例源码,功能都做好了只需要把你的内容放进入即可。 如下图所示,当点

    2024年02月11日
    浏览(100)
  • CSS3实现图片的3D旋转效果

    准备两张图片,尺寸一样大,本代码中是绕 Y 轴进行旋转(也可以改为 X 轴)。 先看看效果:   代码如下:

    2024年02月12日
    浏览(58)
  • VUE 实现 3D词云 旋转词云效果

     效果视频: 3D词云

    2024年02月05日
    浏览(43)
  • `CSS`----图标`3D`环绕旋转,近大远小效果

    CSS ----图标 3D 环绕旋转,近大远小效果 1、先设置图标底部圆环,图片为一张正圆图,给图片外层盒子设置 transform: scaleY(0.25); ,将图片效果转为椭圆 代码如下: 效果图 2、给底部圆环添加动画 3、引入图标,并渲染到页面 4、设置每个图标的位置,并给每个图标添加动画 1、第一

    2024年02月21日
    浏览(48)
  • Three.js--》实现图片转3D效果展示

    目录 项目搭建 初始化three.js基础代码 加载图片纹理 设置着色器 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建工具搭建vue项目

    2024年02月08日
    浏览(61)
  • Three.js--》实现3D汽车展厅效果展示

    目录 项目搭建 初始化three.js基础代码 加载汽车模型 设置展厅效果 设置GUI面板动态控制车身操作 车门操作与车身视角展示 设置手动点击打开关闭车门 设置图片背景 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起

    2024年02月09日
    浏览(60)
  • JavaScript+canvas实现一个旋转的3D球动画效果

    1. 获取Canvas元素和设置初始参数 这部分代码主要是获取Canvas元素,并根据设备的DPI进行缩放。然后,定义了一些全局变量,包括Canvas的宽度、高度、球体旋转的角度和存储所有点的数组。 2. 定义一些常量 这部分代码定义了一些常量,如点的数量、点的半径、球半径等。 3.定

    2024年01月18日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包