js实现3D旋转相册
效果展示：
使用图片： 。。。。剩余自己随意 图片大小为133*200
代码展示：
<!DOCTYPE html>
<!--设置图片的拖拽事件 不可用-->
<html lang="en" ondragstart="return false">
<head><meta charset="UTF-8"><title>3D效果</title><style>* {background-color: #000;}.container {border: 1px solid yellow;perspective: 800px;overflow: hidden;}.box {position: relative;border: 1px solid #f00;width: 133px;height: 200px;margin: 300px auto;transform-style: preserve-3d;transform:rotateX(-20deg) rotateY(0deg);}img {position: absolute;/*设置图片倒影效果*/-webkit-box-reflect:below 5px -webkit-gradient(linear,left top, left bottom,from( transparent),color-stop(40%,transparent),to(rgba(250,250,250,0.4)));}</style>
</head>
<body>
<div class="container"><div class="box"><img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""><img src="img/3.jpg" alt=""><img src="img/4.jpg" alt=""><img src="img/5.jpg" alt=""><img src="img/6.jpg" alt=""><img src="img/7.jpg" alt=""><img src="img/8.jpg" alt=""><img src="img/9.jpg" alt=""><img src="img/10.jpg" alt=""><img src="img/11.jpg" alt=""></div>
</div><script>// a 获取所有 img 元素var mimg = document.querySelectorAll("img");var mlength = mimg.length;// 动态获取 图片的旋转角度var mdeg = 360/mlength;//获取box 容器var mbox = document.querySelector(".box");/*页面加载后执行。。效果*/window.onload= function () {// 1 图片旋转动画for(var i = 0;i<mlength;i++){// console.log(mimg);//每张图片 1 60 2 120 3 180 4 240 60为图片的平分角mimg[i].style.transform = "rotateY("+(mdeg*i)+"deg) translateZ(350px)";// 添加过渡效果 动画执行多长时间 多久后开始执行动画 此时的效果 从最后一张开始动画// console.log(mlength-i);mimg[i].style.transition = "1s "+(mlength-i)*0.1+"s"; // 0.1 动画调节//从第一张开始动画// mimg[i].style.transition = "1s "+i+"s";}// 获取鼠标点的位置 获取 差值 改变 转换的rotate： x yvar newX,newY,lastX,lastY,cvalueX,cvalueY, rotX=-20,rotY=0;// 鼠标滑动后改变效果 (使用鼠标 按下 替换点击事件)document.onmousedown = function (e) {// 鼠标点击// console.log("点击");lastX = e.clientX;lastY = e.clientY;// 鼠标移动this.onmousemove = function (e) {// console.log("移动");newX = e.clientX;newY = e.clientY;console.log(newX +" "+newY);//获取移动的差值cvalueX = newX-lastX;cvalueY = newY-lastY;//获取旋转的角度rotX -= cvalueY; /*因为要向前运动所以是负值*/rotY += cvalueX;// 将角度添加上 img容器mbox.style.transform = "rotateX("+rotX*0.1+"deg) rotateY("+rotY*0.1+"deg)"// 差值太大（转动太快） 调节每次的差值是和上一次差 而不是之前差（初始值的差）lastX = newX;lastY = newY;}// 鼠标抬起this.onmouseup = function () {// console.log("抬起");// 要停止移动的方法this.onmousemove = null;}}}</script>
</body>
</html>js实现3D旋转相册相关推荐
- java3d翻转纪念相册_js实现3D旋转相册
本文实例为大家分享了js实现3D旋转相册的具体代码,供大家参考,具体内容如下 效果展示: 使用图片: 剩余自己随意 图片大小为133*200 代码展示: 3D效果 * { background-col ...
- 3d旋转相册代码源码_原生 JS 实现 3D 立方体
访问该URL可查看效果:http://is666a.gitee.io/javascript3d_cube/ 项目源码已上传码云:小朋友/JavaScript 3D立方体 原生 JS 实现 3D 立方体 ...
- HTML5七夕情人节表白网页(抖音-流动爱心表白)HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 爱心表白网页
HTML5七夕情人节表白网页❤抖音-流动爱心表白❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 爱心表白网页 这是程序员表白 ...
- HTML5七夕情人节表白网页(流星动画3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤流星动画3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是 ...
- HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员 ...
- HTML5七夕情人节表白网页(雪花爱心表白) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤雪花爱心❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员表 ...
- HTML5七夕情人节表白网页(抖音超火3D炫酷魔方) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音超火❤3D炫酷魔方❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序 ...
- HTML5七夕情人节表白网页_生日快乐粒子烟花(自定义文字)_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤生日快乐粒子烟花(自定义文字)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css ...
- HTML5七夕情人节表白网页(抖音-罗盘时钟) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音罗盘时钟❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列 ...
最新文章
- Spring Boot Admin 2.0开箱体验
- python怎么导入视频-python中的导入如何使用，以及.和..相对导入的使用
- Win10任务计划+PowerShell实现Git自动推送
- MEF 插件式开发 - DotNetCore 初体验
- C#LeetCode刷题之#653-两数之和 IV - 输入 BST（Two Sum IV - Input is a BST）
- 负载均衡轮询算法和服务器性能,SpringCloud-Ribbon负载均衡机制、手写轮询算法
- mac php配置和扩展,mac 下安装php 以及 配置扩展！！！！！
- python27换行_python 27 ：用句点字符匹配换行
- 战神引擎1.8斗破斩天泯灭完整开区端+高清地图+动态内观+珍宝+20转+四大陆
- Oracle 建表语句，表结构操作sql
- iPhone4s/iPad2无shsh降级iOS6.1.3
- android+考研助手,安卓考研助手问题总结及改进规划
- OpenCV-单峰三角阈值法Thresh_Unimodal
- ES6模板字符串中使用循环并取值
- java实现堆栈 打印英文字母表
- CMD查看局域网在线IP
- 基本DOS命令---6.关机重启操作命令
- 豆瓣评分9.6，推荐一本人工智能入门书籍《21天学通Python》
- 抖音电子画册教程html,抖音爆火文字视频制作教程
- 蓝桥杯——算法训练——数字三角形