java3d翻转纪念相册_js实现3D旋转相册
本文实例为大家分享了js实现3D旋转相册的具体代码,供大家参考,具体内容如下
效果展示:
使用图片:
剩余自己随意 图片大小为133*200
代码展示:
3D效果
* {
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)));
}
// a 获取所有 img 元素
var mimg = document.querySelectorAll("img");
var mlength = mimg.length;
// 动态获取 图片的旋转角度
var mdeg = 360/mlength;
//获取box 容器
var mbox = document.querySelector(".box");
/*页面加载后执行。。效果*/
window.οnlοad= function () {
// 1 图片旋转动画
for(var i = 0;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 y
var 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;
}
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
java3d翻转纪念相册_js实现3D旋转相册相关推荐
- 纯CSS制作3D动态相册【流星雨3D旋转相册】HTML+CSS+JavaScriptHTML5七夕情人节表白网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- java3d翻转纪念相册_HTML5 3D旋转相册的实现示例
前一段时间,突然看到一个炫酷的3D旋转相册,这里记录一下,先看效果图: HTML5 代码如下: HTML5 3D旋转图片相册 可鼠标悬停 * { padding: 0; margin: 0; bord ...
- 3d旋转相册代码源码_如何使用CSS开发精美3D旋转相册?
借助CSS所提供的animation动画属性及2D.3D变换属性,我们可以摆脱对JavaScript的依赖,设计开发各类效果优秀的前端动态效果,在之前文章和视频中我们也介绍了不少基于CSS与JavaS ...
- 3d旋转相册代码源码_原生 JS 实现 3D 立方体
访问该URL可查看效果:http://is666a.gitee.io/javascript3d_cube/ 项目源码已上传码云:小朋友/JavaScript 3D立方体 原生 JS 实现 3D 立方体 ...
- HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册 哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
- 我对象说陪我过七夕,象说没时间,我一怒给女神做了一个某音上很火的3D旋转相册
大家好,我是辣条. 七夕快到了,有人开心有人愁,辣条就是愁的那个,辣条也是有女朋友的,就是太废打气筒了,隔三差五就要充气,阿西吧... 今天这篇博客就是演示做一个前端3D旋转相册,学会的小伙伴可以给自 ...
- 每日一技:给女友用代码做一个3D旋转相册,每天亿遍忘记初恋~
前言 不会表白?!我来教你给女朋友或者正在追求的妹子一点小惊喜~ 今天这篇文章就是演示给女友做一个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爱心表白 这是 ...
最新文章
- LBS 基于位置的服务
- android中volley通信框架简介
- Linux驱动基础:msm平台,modem等framework加载
- kafka for mac安装
- javascript中函数参数以及函数中局部变量作用域一点点理解
- C++和Java的属性访问和方法调用 效率比较
- foreach是同步还是异步JAVA,Java中foreach与正常for循环效率对比
- 7-1 一元多项式求导 (10 分)
- python经典实例-终于明了python入门经典实例
- CentOS7网络快速解决
- python调用接口获取文件_Python中做接口自动化如何读取配置ini文件
- java 文件编码_Java获取文件编码
- 树莓派搭建物联网服务器
- linux无线网络已连接,上不了网,无线网络连接上但上不了网的原因和解决方法
- 高中数学知识点归纳总结三角函数与解三角形
- AI英雄出少年!奔赴星辰,他们正在创造黄金时代
- LNZ32P4-C - Pan-Tilt-Zoom (PTZ) Camera with 1080p HD Video Color Night Vision
- 【chirpstack+MQTT】downlink下行数据通讯
- P1309 [NOIP2011 普及组] 瑞士轮-快排+归并排序
- 大疆网上测评题库_大疆科技题目