3D动态相册实现代码
2024-06-07 13:58:43
以前学习的时候，写的动态相册，感觉有趣，分享一下，复制代码，修改为自己的图片路径即可。
中心旋转相册
效果
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相册</title>
<style type="text/css">body{background-image: url(img/g1.jpg); /* -----------------------*/background-size: 100% 100%;perspective: 5000px;}
.show{perspective: 5000px;-webkit-transform: rotateX(-45deg);-moz-transform: rotateX(-45deg);transform: rotateX(-45deg);transform-style: preserve-3d;}
.box{background-image: url(img/g7.png); /* ------------------------*/background-size: 150px 250px;position: relative;width: 150px;height: 250px;border: 1px solid #ccc;margin: 300px auto;transform-style: preserve-3d;-webkit-animation: rotate1 10s linear infinite;-moz-animation: rotate1 10s linear infinite;animation: rotate1 10s linear infinite;}
.box img{width: 150px;height: 250px;border: 1px solid #ccc;position: absolute;left: 0;top: 0;-webkit-box-reflect: below 20px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,0) 30%,rgba(250,250,250,0.5));}.img1{-webkit-transform: translateZ(300px);-moz-transform: translateZ(300px);transform: translateZ(300px);}.img2{-webkit-transform:rotateY(36deg) translateZ(300px) ;-moz-transform:rotateY(36deg) translateZ(300px) ;transform:rotateY(36deg) translateZ(300px) ;}.img3{-webkit-transform:rotateY(72deg) translateZ(300px);-moz-transform:rotateY(72deg)g) translateZ(300px) ;transform:rotateY(72deg) (300px) ;}.img4{-webkit-transform: rotateY(108deg) translateZ(300px);-moz-transform:rotateY(108deg) translateZ(300px) ;transform:rotateY(108deg) translateZ(300px) ;}.img5{-webkit-transform: rotateY(144deg) translateZ(300px);-moz-transform:rotateY(144deg) translateZ(300px) ;transform:rotateY(144deg) translateZ(300px) ;}.img6{-webkit-transform:rotateY(180deg) translateZ(300px) ;-moz-transform:rotateY(180deg) translateZ(300px) ;transform:rotateY(180deg) translateZ(300px) ;}.img7{-webkit-transform:rotateY(216deg) translateZ(300px) ;-moz-transform:rotateY(216deg) translateZ(300px) ;transform: rotateY(216deg) translateZ(300px);}.img8{-webkit-transform:rotateY(252deg) translateZ(300px) ;-moz-transform:rotateY(252deg) translateZ(300px) ;transform:rotateY(252deg) translateZ(300px) ;}.img9{-webkit-transform:rotateY(288deg) translateZ(300px) ;-moz-transform:rotateY(288deg) translateZ(300px) ;transform:rotateY(288deg) translateZ(300px) ;}.img10{-webkit-transform:rotateY(324deg) translateZ(300px) ;-moz-transform:rotateY(324deg) translateZ(300px) ;transform:rotateY(324deg) translateZ(300px) ;} @-moz-keyframes rotate1{0%{-webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);transform: rotateY(0deg);}100%{-webkit-transform: rotateY(360deg);-moz-transform: rotateY(360deg);transform: rotateY(360deg);}}@-webkit-keyframes rotate1{0%{-webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);transform: rotateY(0deg);}100%{-webkit-transform: rotateY(360deg);-moz-transform: rotateY(360deg);transform: rotateY(360deg);}}
</style>
</head>
<body>
<div class="show"><div class="box"><img src="img/g1.jpg" class="img1"/><img src="img/g2.jpg" class="img2"/><img src="img/g3.jpg" class="img3" /><img src="img/g4.jpg" class="img4" /><img src="img/g5.jpg" class="img5"/><img src="img/g6.jpg" class="img6"/><img src="img/g7.png" class="img7" /><img src="img/g8.png" class="img8" /><img src="img/g9.png" class="img9" /><img src="img/g10.png" class="img10" /><img src="img/g5.jpg" class="img10" /></div></div></body></html>
旋转立方体相册
效果
代码：
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><link type="text/css" href="./css/3.css" rel="stylesheet "><link href="s3.css" rel="stylesheet" type="text/css"><title>旋转立方体相册</title>
</head>
<body>
<div id="react"><div class="out_front"><img src="img/g1.jpg" class="out_pic"></div><div class="out_back"><img src="img/g2.jpg" class="out_pic"></div><div class="out_left"><img src="img/g3.jpg" class="out_pic"></div><div class="out_right"><img src="img/g4.jpg" class="out_pic"></div><div class="out_top"><img src="img/g5.jpg" class="out_pic"></div><div class="out_bottom"><img src="img/g6.jpg" class="out_pic"></div><span class="in_front"><img src="img/g7.png" class="in_pic"></span><span class="in_back"><img src="img/g8.png" class="in_pic"></span><span class="in_left"><img src="img/g9.png" class="in_pic"></span><span class="in_right"><img src="img/g10.png" class="in_pic"></span><span class="in_top"><img src="img/g3.jpg" class="in_pic"></span><span class="in_bottom"><img src="img/g4.jpg" class="in_pic"></span>
</div></body>
</html>
@charset "utf-8";
<pre name="code" class="css">*{padding:0;margin:0;
}
body{width:100%;height:100%;background: url(img/g1.jpg);
}
#react{width: 200px;height:200px;margin: 200px auto;transform-style:preserve-3d;animation:rotate 20s infinite;animation-timing-function: linear;
}
#react div{position:absolute;transition: all .4s;
}
div .out_pic{width:200px;height:200px;opacity:0.9;
}
div .in_pic{width:100px;height:100px;
}
#react span{display:block;position:absolute;width:100px;height:100px;top:50px;left:50px;
}
@keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}
}.out_front{transform:translateZ(100px);
}
.out_back{transform:translateZ(-100px);
}
.out_left{transform:rotateY(90deg) translateZ(100px);
}
.out_right{transform: rotateY(-90deg) translateZ(100px);
}
.out_top{transform:rotateX(90deg) translateZ(100px);
}
.out_bottom{transform: rotateX(-90deg) translateZ(100px);
}
.in_front{transform:translateZ(50px);
}
.in_back{transform:translateZ(-50px);
}
.in_left{transform:rotateY(90deg) translateZ(50px);
}
.in_right{transform: rotateY(-90deg) translateZ(50px);
}
.in_top{transform:rotateX(90deg) translateZ(50px);
}
.in_bottom{transform: rotateX(-90deg) translateZ(50px);
}/*外面的图片散开*/
#react:hover .out_front{transform:translateZ(200px);
}
#react:hover .out_back{transform:translateZ(-200px);
}
#react:hover .out_left{transform:rotateY(90deg) translateZ(200px);
}
#react:hover .out_right{transform: rotateY(-90deg) translateZ(200px);
}
#react:hover .out_top{transform:rotateX(90deg) translateZ(200px);
}
#react:hover .out_bottom{transform: rotateX(-90deg) translateZ(200px);
}/*里面的图片散开*/
#react:hover .in_front{transform:translateZ(100px);
}
#react:hover .in_back{transform:translateZ(-100px);
}
#react:hover .in_left{transform:rotateY(90deg) translateZ(100px);
}
#react:hover .in_right{transform: rotateY(-90deg) translateZ(100px);
}
#react:hover .in_top{transform:rotateX(90deg) translateZ(100px);
}
#react:hover .in_bottom{transform: rotateX(-90deg) translateZ(100px);
}旋转立方体相册2
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title><link rel="stylesheet" href="css/YRX.css" />
<link href="s1.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--/*外层最大容器*/-->
<div class="wrap">
<!-- /*包裹所有元素的容器*/--><div class="cube"><!--前面图片 --><div class="out_front"><img src="#" class="pic" ></div><!--后面图片 --><div class="out_back"><img src="#" class="pic"></div><!--左图片 --><div class="out_left"><img src="#" class="pic"></div><div class="out_right"><img src="#" class="pic"></div><div class="out_top"><img src="#" class="pic"></div><div class="out_bottom"><img src="#" class="pic"></div><!--小正方体 --> <span class="in_front"><img src="#" class="in_pic" /></span><span class="in_back"><img src="#" class="in_pic" /></span><span class="in_left"><img src="#" class="in_pic" /></span><span class="in_right"><img src="#" class="in_pic" /></span><span class="in_top"><img src="#" class="in_pic" /></span><span class="in_bottom"><img src="#" class="in_pic" /></span>
</div>
</div>
</body>
</html>
s1.css
@charset "utf-8";
html{background:pink;height: 100%;
}
/*最外层容器样式*/
.wrap{width: 10px;height: 10px;/*改变左右上下,图片方块移动*/margin: 200px 400px;position: relative;}
/*包裹所有容器样式*/
.cube{width:600px;height:400px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);-webkit-animation: rotate 20s infinite;/*匀速*/animation-timing-function: linear;
}
@-webkit-keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{position: absolute;width: 300px;height: 300px;opacity: 0.8;transition: all .4s;
}
/*定义所有图片样式*/
.pic{width: 300px;height: 300px;
}
.cube .out_front{transform: rotateY(0deg) translateZ(150px);
}
.cube .out_back{transform: translateZ(-150px) rotateY(180deg);
}
.cube .out_left{transform: rotateY(90deg) translateZ(150px);
}
.cube .out_right{transform: rotateY(-90deg) translateZ(150px);
}
.cube .out_top{transform: rotateX(90deg) translateZ(150px);
}
.cube .out_bottom{transform: rotateX(-90deg) translateZ(150px);
}
/*定义小正方体样式*/
.cube span{display: bloack;width: 200px;height: 200px;position: absolute;top: 50px;left: 50px;
}
.cube .in_pic{width: 200px;height: 200px;
}
.cube .in_front{transform: rotateY(0deg) translateZ(100px);
}
.cube .in_back{transform: translateZ(-100px) rotateY(180deg);
}
.cube .in_left{transform: rotateY(90deg) translateZ(100px);
}
.cube .in_right{transform: rotateY(-90deg) translateZ(100px);
}
.cube .in_top{transform: rotateX(90deg) translateZ(100px);
}
.cube .in_bottom{transform: rotateX(-90deg) translateZ(100px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{transform: rotateY(0deg) translateZ(400px);
}
.cube:hover .out_back{transform: translateZ(-400px) rotateY(180deg);
}
.cube:hover .out_left{transform: rotateY(90deg) translateZ(400px);
}
.cube:hover .out_right{transform: rotateY(-90deg) translateZ(400px);
}
.cube:hover .out_top{transform: rotateX(90deg) translateZ(400px);
}
.cube:hover .out_bottom{transform: rotateX(-90deg) translateZ(400px);
}旋转墙动态相册
<!DOCTYPE html>
<html lang="en" ondragstart="return false"><head><meta charset="UTF-8"><meta name="Keywords" content=""><meta name="Description" content=""><title>图册</title><!-- 如果我有天醒来 --><!-- 层叠样式表 --><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 class="f1" src="img/12.jpg" /><img class="f1" src="img/13.jpg" /><img class="f1" src="img/14.jpg" /><img class="f1" src="img/15.jpg" /><img class="f1" src="img/16.jpg" /><img class="f1" src="img/1.jpg" /><img class="f1" src="img/2.jpg" /><img class="f1" src="img/3.jpg" /><img class="f1" src="img/4.jpg" /><img class="f1" src="img/5.jpg" /><img class="f1" src="img/6.jpg" /><img class="f1" src="img/7.jpg" /><img class="f1" src="img/5.jpg" /><img class="f1" src="img/6.jpg" /><img class="f1" src="img/7.jpg" /><img class="f1" src="img/8.jpg" /><img class="f1" src="img/9.jpg" /><img class="f1" src="img/10.jpg" /><img class="f1" src="img/11.jpg" /><img class="f1" src="img/17.jpg" /><img class="f1" src="img/18.jpg" /><img class="f1" src="img/19.jpg" /><img class="f1" src="img/20.jpg" /><img class="f1" src="img/21.jpg" /><img class="f1" src="img/22.jpg" /><img class="f1" src="img/23.jpg" /><img class="f1" src="img/24.jpg" /><img class="f1" src="img/25.jpg" /><img class="f1" src="img/26.jpg" /><img class="f1" src="img/27.jpg" /><img class="f1" src="img/28.jpg" /><img class="f1" src="img/29.jpg" /><img class="f1" src="img/30.jpg" /><!-- 引入图片值页面 --><img class="f2" src="img/1.jpg" /><img class="f2" src="img/2.jpg" /><img class="f2" src="img/3.jpg" /><img class="f2" src="img/4.jpg" /><img class="f2" src="img/5.jpg" /><img class="f2" src="img/9.jpg" /><img class="f2" src="img/10.jpg" /><img class="f2" src="img/11.jpg" /><img class="f2" src="img/12.jpg" /><img class="f2" src="img/25.jpg" /><img class="f2" src="img/26.jpg" /><img class="f2" src="img/27.jpg" /><img class="f2" src="img/28.jpg" /><img class="f2" src="img/29.jpg" /><img class="f2" src="img/30.jpg" /><img class="f2" src="img/13.jpg" /><img class="f2" src="img/14.jpg" /><img class="f2" src="img/15.jpg" /><img class="f2" src="img/16.jpg" /><img class="f2" src="img/17.jpg" /><img class="f2" src="img/18.jpg" /><img class="f2" src="img/19.jpg" /><img class="f2" src="img/20.jpg" /><img class="f2" src="img/21.jpg" /><img class="f2" src="img/22.jpg" /><img class="f2" src="img/23.jpg" /><img class="f2" src="img/24.jpg" /><img class="f2" src="img/6.jpg" /><img class="f2" src="img/7.jpg" /><img class="f2" src="img/5.jpg" /><img class="f2" src="img/6.jpg" /><img class="f2" src="img/7.jpg" /><img class="f2" src="img/8.jpg" /><!-- 引入图片值页面 --><img class="f3" src="img/1.jpg" /><img class="f3" src="img/2.jpg" /><img class="f3" src="img/11.jpg" /><img class="f3" src="img/12.jpg" /><img class="f3" src="img/25.jpg" /><img class="f3" src="img/26.jpg" /><img class="f3" src="img/27.jpg" /><img class="f3" src="img/3.jpg" /><img class="f3" src="img/4.jpg" /><img class="f3" src="img/5.jpg" /><img class="f3" src="img/16.jpg" /><img class="f3" src="img/17.jpg" /><img class="f3" src="img/18.jpg" /><img class="f3" src="img/10.jpg" /><img class="f3" src="img/28.jpg" /><img class="f3" src="img/29.jpg" /><img class="f3" src="img/30.jpg" /><img class="f3" src="img/13.jpg" /><img class="f3" src="img/19.jpg" /><img class="f3" src="img/20.jpg" /><img class="f3" src="img/21.jpg" /><img class="f3" src="img/22.jpg" /><img class="f3" src="img/23.jpg" /><img class="f3" src="img/24.jpg" /><img class="f3" src="img/9.jpg" /><img class="f3" src="img/14.jpg" /><img class="f3" src="img/15.jpg" /><img class="f3" src="img/6.jpg" /><img class="f3" src="img/7.jpg" /><img class="f3" src="img/5.jpg" /><img class="f3" src="img/6.jpg" /><img class="f3" src="img/7.jpg" /><img class="f3" src="img/8.jpg" /><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;console.log(len)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)";//过渡时间1sele.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)";//过渡时间1sele.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)";//过渡时间1sele.style.transition = "1s " + (len - index) * 0.1 + "s";});// Array.prototype.forEach.call(oImg, function (ele, index, self) {// // 旋转并沿Z轴平移// ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";// //过渡时间1s// ele.style.transition = "1s " + (len - index) * 0.1 + "s";// });}//翻动3D相册var newX, newY, lastX, lastY, minusX, minusY, rotX = -20, rotY = 0;document.onmousedown = function (e) {// 点击设置初值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;//清除鼠标移动}}</script>
</body></html>
3D动态相册实现代码相关推荐
- 520表白html实现3D动态相册，换成女朋友照片
介绍: 还有几天就是5月20号了赶紧做好给你女朋友给你喜欢的人表白3D动态相册,换成女朋友照片,顺畅丝滑,单身狗的吃狗粮吧,哈哈哈哈 前端小伙伴也可以学习学习 地址: http://zijiepan2 ...
- 最新520表白HTML源码+实现3D动态相册
正文: 最新520表白HTML源码+实现3D动态相册,还有几天就是5月20号了,赶紧做好给你女朋友,又或者用来给你喜欢的人表白啥的. 源码属于3D动态相册,是动态的哈,但是由于文章不能上传GIF图片, ...
- java3d翻转纪念相册_抖音上很火的3D立体动态相册实现代码!
前言: 圣诞节快到了,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧!先上效果图,来引起下你们的兴趣. ...
- java 编程动感相册_抖音3D立体动态相册实现代码下载
今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧,别忘了发到自己抖音,让女朋友看一下!先上效果图,来引起下你们的兴趣. 再看看具体的效果: 一.新建一个i ...
- 纯CSS制作3D动态相册【流星雨3D旋转相册】HTML+CSS+JavaScriptHTML5七夕情人节表白网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- 抖音3d相册html代码,抖音3D立体相册表白代码.doc
抖音3D立体相册表白浪漫代码 首先先建立html文件 css-3d旋转 之后再新建一个CSS的文件夹 并在css文件夹中建立txt文件,并且把代码复制进去,修改后缀名为.css html{ backg ...
- 如何用HTML+CSS制作3D动态相册？ #情人节表白#
HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- HTML+CSS+JS制作3D动态相册表白网站代码【程序员专属情人节表白网站】
❤ 精彩专栏推荐
- HTML5七夕情人节表白网页制作【纯HTML+CSS实现3D动态相册-蓝色海洋 】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- HTML5七夕情人节表白网页制作【浪漫的空中散落的花瓣3D相册】HTML+CSS+JavaScript 3D动态相册源码素材 html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
最新文章
- CF 2B The least round way DP+Math
- 【错误记录】反射内部类报错 ( Android 使用 Hook 时反射内部类报错 )
- C#中如何得到Graphics对象
- 【Python】Magician“专属”神秘的“读心术”
- Spring Cloud与微服务学习总结（13）——云原生趋势下，微服务的拆分粒度如何把握？
- XML 文档四种解析放式
- 阻滞增长模型--Logistic模型
- MDM移动设备管理概述
- 周董演唱会为什么总是抢不到票？教你用Python做一个自动抢票脚本
- 使用开源文档工具docsify，用写博客的姿势写文档
- 平凡程序员一年又一年的感悟(2019)
- mysql 数据横向拼接_Mysql 合并结果接横向拼接字段
- cheat sheet 打包打印版大全python R machine learning
- 计算机视觉传感器系统
- tokenpocket内网页获取用户钱包信息
- JavaScript 之 Array对象
- windows7英文版，变为中文版
- 程序员节的过节姿势大全
- 0-1背包问题小总结(hdu 2062)
- XP系统装PhotoShop的CS3版本