3D旋转相册

最新推荐文章于 2023-01-10 10:41:54 发布
最新推荐文章于 2023-01-10 10:41:54 发布
阅读量1.8k 收藏 8
点赞数 3
分类专栏： JS HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pingwei_deng/article/details/80009449
版权
JS 同时被 2 个专栏收录
15 篇文章 0 订阅
订阅专栏
HTML
10 篇文章 0 订阅
订阅专栏
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转相册</title>
<meta name="keywords" content=""> <!-- 关键字 -->
<meta name="description" content=""> <!-- 描述 -->
<style>
* {
margin: 0;
}
body {
background: #000;
}
#perspective {
perspective: 800px;  /*场景深度*/
}
#wrap {
position: relative;
width: 120px;
height: 180px;
margin: 100px auto;
/*border: 1px solid #F00;*/
transform-style: preserve-3d;
transform: rotateX(-20deg) ;  
}
img {
width: 100%;
position: absolute;
box-shadow:0 0 30px red;
-webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 30%,rgba(0,0,0,.5) 100%);
/*-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));*/
}
</style>
</head>
<body οndragstart="return false;" οncοntextmenu="return false;">
<div id="perspective">
<div id="wrap">
<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>
</body>
<script>
var oImg = document.getElementsByTagName('img');
var deg = 360/oImg.length; //圆的单位度数
window.onload = function() {
[].map.call(oImg,function(arg1, arg2) {
// console.log(arg1,arg2);
arg1.style.boxReflect = 'below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 30%,rgba(0,0,0,.5) 100%)';
arg1.style.transform = 'rotateY(' + arg2*deg + 'deg) translateZ(300px)';
arg1.style.transition = '1s ' +(oImg.length - arg2)*0.2 + 's';
})
}


//拖拽
var newX,newY,pervX,pervY,minusX,minusY,rotX = -20,rotY = 0;
var oWrap = document.getElementById('wrap');
//点击事件
document.onmousedown = function(e) {
pervX = e.clientX;
pervY = e.clientY;
// console.log(e)
//移动事件
this.onmousemove = function(e) {
// console.log(22)
newX = e.clientX;
newY = e.clientY;


//差值
minusX = newX - pervX;
minusY = newY - pervY;

//转换为度数给相册
rotX -= minusY * 0.1;
rotY += minusX * 0.2;
oWrap.style.transform = 'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)';

pervX = newX;
pervY = newY;
}
//松开事件
this.onmouseup = function(e) {
//禁止移动事件
this.onmousemove = null;
// console.log(111)
}
}
</script>
</html>
pingwei_deng
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
抖音很火的JavaScript旋转3D相册源码.zip
05-06
抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的Jav
实现图片3D效果（初步）
liuxiaoxiao
08-07 584
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ cursor: grab; margin: 0px; background-color: black; overflow: hidden; } #perspec.
3D旋转相册（附源码+素材）
weixin_45345143的博客
12-03 8920
3D立体选择相册制作，给你的女神最棒的效果，实现的过程都是用的win10电脑自带的软件实现的，可操作性强，无需额外安装软件。
3D旋转相册代码及详细使用教程
weixin_46015333的博客
08-19 3万+
相信很多小伙伴看着短视频里的3D旋转相册很想要吧，下面就让我们来看看它的代码及使用方法吧！ 效果展示 代码展示 1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3D立体动态相册</title> <link rel="stylesheet" type="text/css" href="css/css.css"/> <
css【3D旋转相册】-源码--超级简单
preserveXing的博客
03-11 2290
** css【3D旋转相册】-源码–超级简单 ** css *{ margin: 0; padding: 0; } body{ min-height: 100vh; overflow: hidden; background-color: #333; perspective: 1200px; } .continent{ transform-style: preserve-3d; position: absolute; top: 0
3d旋转相册.rar
01-15
3d旋转相册，可自行挑选相册内的图片，更换代码内图片名称即可命中相册内图片，最近很流行这种相册，做出来很有纪念意义。
3D旋转相册，表白利器！
12-23
HTML+CSS
3d旋转相册送给女票的.rar
05-18
抖音最近很火的3d相册，被女票所逼自己写了一个，现在分享给需要的朋友，随时送给她们吧。送给女票的旋转3d相册，图片可以自行替换，
HTMLCSS3D立方体旋转相册完整源码附注释
qq_37344688的博客
01-08 248
HTMLCSS3D立方体旋转相册完整源码附注释
抖音很火的3d旋转相册（修改了尺寸版）
12-23
下载打开index.html即可，博客地址: https://blog.csdn.net/qq_30750609/article/details/103115598
Html 3D旋转相册制作
alicema1111的博客
01-10 1947
这篇博客针对编写代码，代码整洁，规则，易读。 学习与应用推荐首选。
旋转相册的制作
weixin_65607135的博客
09-08 2233
html和css真的很炫酷，对于没有接触过的人来说是有点困难，但是如果感兴趣的，深入了解一下就会发现它的奇妙之处，会制作很多炫酷的效果哦。2.然后在文件夹里再建一个文件夹用来放图片，一个新建文档，注意把后缀名改成.html.在浏览器里是会旋转的哦，大家快试试哦，送给你心爱的那个她（他）吧，去送一份惊喜吧。在url里面放你需要的相册，只需要在./img/后面写你自己相册的名字就可以了。5.写好之后直接保存退出，双击你的index.html文件就可以看到效果了哦。3.将你需要的图片放在img文件夹里面。
教你零基础制作3D旋转相册（送给那个她~）
ChrisPhantom的博客
03-08 1万+
3D立体相册 　　是的，相信大家或多或少的会在一些地方看到某些程序员用代码给自己女朋友写3D立体相册，那么你会不会也想自己手动敲出那些炫酷的代码呢？ 　　那你是找对地方了。废话不多说，今天为大家分享利用html实现3D旋转效果。不用怕，不需要什么软件的，只需要一个电脑和，一只手！
3D旋转相册html+css代码分享
m0_53602804的博客
04-16 8486
html+css小练手
每日一技：给女友用代码做一个3D旋转相册，每天亿遍忘记初恋~
m0_72557783的博客
07-04 4927
不会表白？！我来教你给女朋友或者正在追求的妹子一点小惊喜~今天这篇文章就是演示给女友做一个3D旋转相册，学会的小伙伴可以给自己的女朋友或者喜欢的女生做一个，相比几百上千的礼物，零成本的技术实现的3D选择相册又走心，还可以用来当壁纸，赶快先收藏起来！...
【3D相册】零基础完成3D相册并配上背景音乐
一名在读学生
04-26 4208
文章目录一、前言二、准备工作1、新建文件夹2、准备素材对于图片的处理对于音乐的处理三、代码工作1、python处理6张图片1.1代码运行1.2 放入背景图片2、写html文件2.1 更换音乐素材3、运行main.html四、推荐阅读 一、前言 帮助好哥们整的一个小相册，给他写个教程帖 大致效果如下（动图超图片上传上限了）： 二、准备工作 1、新建文件夹 如：我在D盘中新建一个 3D相册 文件夹，然后在 3D文件夹 中 新建2个文件夹：img ， main 其中： img：放素材图片 ma
抖音上很火的3D立体动态相册实现代码!
热门推荐
jdk_wangtaida的博客
11-26 10万+
前言： 圣诞节快到了，是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！先上效果图，来引起下你们的兴趣。 正文： 一、新建一个index.html的文件，代码如下 <!DOCTYPE html> <html lang="en"> <head> <m...
3d旋转相册html
最新发布
08-30
你可以在以下代码中找到一个基本的3D旋转相册的HTML实现： ```html <!DOCTYPE html> .container { perspective: 1000px; width: 300px; height: 300px; } .carousel { transform-style: preserve-3d; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值