java3d翻转纪念相册_抖音上很火的3D立体动态相册实现代码!
前言:
圣诞节快到了,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了,来制作属于我们程序员的浪漫吧!先上效果图,来引起下你们的兴趣。
正文:
一、新建一个index.html的文件,代码如下
纯CSS实现鼠标经过3D立体动态展示图片特效代码
二、css样式的代码
@charset "utf-8";
*{
margin:0;
padding:0;
}
body{
max-width: 100%;
min-width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size:100% 100%;
position: absolute;
margin-left: auto;
margin-right: auto;
}
li{
list-style: none;
}
.box{
width:200px;
height:200px;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size:100% 100%;
position: absolute;
margin-left: 42%;
margin-top: 22%;
-webkit-transform-style:preserve-3d;
-webkit-transform:rotateX(13deg);
-webkit-animation:move 5s linear infinite;
}
.minbox{
width:100px;
height:100px;
position: absolute;
left:50px;
top:30px;
-webkit-transform-style:preserve-3d;
}
.minbox li{
width:100px;
height:100px;
position: absolute;
left:0;
top:0;
}
.minbox li:nth-child(1){
background: url(../img/01.png) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
background: url(../img/02.png) no-repeat 0 0;
-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
background: url(../img/03.png) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
background: url(../img/04.png) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
background: url(../img/05.png) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
background: url(../img/06.png) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
background: url(../img/1.png) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
background: url(../img/2.png) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
background: url(../img/3.png) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
background: url(../img/4.png) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
background: url(../img/5.png) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
background: url(../img/6.png) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
width: 800px;
height: 400px;
position: absolute;
left: 0;
top: -20px;
-webkit-transform-style: preserve-3d;
}
.maxbox li{
width: 200px;
height: 200px;
background: #fff;
border:1px solid #ccc;
position: absolute;
left: 0;
top: 0;
opacity: 0.2;
-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
-webkit-transform:translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(2){
-webkit-transform:rotateX(180deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(3){
-webkit-transform:rotateX(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(4){
-webkit-transform:rotateX(90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(5){
-webkit-transform:rotateY(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(6){
-webkit-transform:rotateY(90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
@keyframes move{
0%{
-webkit-transform: rotateX(13deg) rotateY(0deg);
}
100%{
-webkit-transform:rotateX(13deg) rotateY(360deg);
}
}
三、文件的目录结构,把css文件放到css文件夹里,图片放到img文件夹里。
四、图片尺寸不会修改的,可以选择使用美图秀秀网页版很简单
五、容易出现的问题 ,图片展示不全或展示的方向不对
1.图片尺寸需要修改 (解决展示不全的情况)
上图是我的图片文件夹里放的图片 ,首先01-06编号命名的图片尺寸是100x100px的大小的,1-6编号是400x400px,如果效果想展示最佳,100x100px的图片是以头部特写的照片最好,因为01-06是立体照片内部小正方体的照片,1-6编号是外部正方体的照片。
2.图片的方向需要修改(解决头朝下的问题)
修改的方向如上图展示所示,比如第三张头就应该朝下,否则形成的效果图像会出现头是倒着的情况。
六、放一下动态效果图
总结:
生活虽然总有辛酸,但是我们不应该减少去创造生活的乐趣,不断寻找属于自己的那份快乐,才应该是我们生活的态度。如果是非技术的朋友看到这篇博客,发现不会弄,可以直接留言要代码包,自己替换下图片就可以啦。
我是阿达,一名喜欢分享知识的程序员,时不时的也会荒腔走板的聊一聊电影、电视剧、音乐、漫画,这里已经有723位小伙伴在等你们啦,感兴趣的就赶紧来点击关注我把,哪里有不明白或有不同观点的地方欢迎留言!
java3d翻转纪念相册_抖音上很火的3D立体动态相册实现代码!相关推荐
- 怎么用java做一个立体相册_抖音上很火的3D立体动态相册实现教程!(不懂编程也能学会)...
现在开始说说制作过程: 一.创建文件夹 1.在桌面建一个文件夹,命名随意 2.在文件夹里创建一个文件名为index.html的文件 3.在文件夹里创建两个文件名分别为img.css的文件夹 4.在cs ...
- 编程制作动态壁纸的思路_抖音上很火的3D立体动态相册实现教程!(不懂编程也能学会)...
现在开始说说制作过程: 一.创建文件夹 1.在桌面建一个文件夹,命名随意 2.在文件夹里创建一个文件名为index.html的文件 3.在文件夹里创建两个文件名分别为img.css的文件夹 4.在cs ...
- 抖音上很火的3D立体动态相册
带背景音乐网站效果: http://www.fengzhao.icu/photos/html/%E6%8A%96%E9%9F%B3%E4%B8%8A%E5%BE%88%E7%81%AB%E7%9A%8 ...
- 抖音上很火的3D立体动态相册代码制作教程
直接来正文 直接来干货 先创建一个html文件 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 抖音3d相册html代码,抖音上很火的3D立体动态相册.html
纯CSS实现鼠标经过3D立体动态展示图片特效代码 *{ margin:0; padding:0; } body{ max-width: 100%; min-width: 100%; height: 1 ...
- 抖音上很火的H53D立体动态相册效果
网站效果:http://www.fengzhao.icu/pic/index.html 动态效果图 源码Demo: 一.新建一个index.html的文件,代码如下 <!DOCTYPE html ...
- 用html3d静态相册带音乐,抖音上很火的H53D立体动态相册效果
网站效果:http://www.fengzhao.icu/pic/index.html 动态效果图 源码Demo:css 1.新建一个index.html的文件,代码以下 纯CSS实现鼠标通过3D立体 ...
- python如何写生日快乐说说_抖音上很火的生日句子,适合过生日发的高逼格
抖音上很火的生日时发的句子,还有给自己生日的高逼格祝福,码起来,迟早会用到. 抖音上很火的生日句子,适合过生日发的高逼格祝福: 1. 没有零点的生日祝福 没有煽情的语录 感恩所有 都是馈赠和成长 祝自 ...
- 抖音高贵气质的签名_抖音上很火的个性签名
抖音的个性签名是一个让大家一眼就可以了解该账号的展示方式,同时在抖音里经常会有一些账号因为个性签名变火,这里我们就整理了一些在抖音上很火的个性签名,大家可以参考一下! 1.尊严这种东西,你得有实力扞卫 ...
最新文章
- typescript索引类型_TypeScript类型声明书写详解
- Flink批处理优化器之数据属性
- 动态参数与global和nonlocal
- C语言程序流程图switch,C语言流程控制之switch语句详解
- IP 防护等级技术白皮书
- CAD教程:CAD自定义菜单和工具栏的操作技巧
- python 单位根检验代码_Python中ADF单位根检验实现查看结果的方法
- 雷蛇2020年上半年表现远胜预期收益创新高达4.475亿美元经调整息税折旧摊销前盈利(Adjusted EBITDA)为320万美元
- 关于2013年1月21日的DNS故障分析文章
- 错误No Feign Client for loadBalancing defined. Did you forget to include spring-cloud-starter-loadbala
- 设计模式之禅【迭代器模式】
- 史上首次!苹果谷歌高调合作,打通iOS和安卓,蓝牙匿名追踪新冠接触者,5月上线
- 显示器怎么看服务器内容,电脑显示器知识扫盲 教你怎么看显示器参数
- 墨西哥区域相关的西班牙语日期的处理方案。。
- 身份证号码的规则及验证原理
- 【源码更新】手办一番赏二次元潮玩星球在线抽盲盒源码小程序1.0
- Office 365系列之九:使用Windows PowerShell管理O365平台
- python发送esc_Python组合键输入检测ESC和En
- ninja 编译系统
- 百度富文本编辑器 UM
热门文章
- 专升本计算机笔记 计算机基础知识
- 鸿蒙时期人物排行榜,《永生》之战力排行榜,那些经典角色你还记得吗
- android 随机坐标,按键精灵安卓版如何随机坐标判断点击.在线等大神回复
- 2021-07-28 Python爬虫
- img、link、html使用样式
- 华为+android+root权限获取root,[Android]如何获取华为手机的root权限
- 【渝粤教育】国家开放大学2018年春季 0553-21T色彩 参考试题
- 华为防火墙笔记-报文处理流程
- 文明与征服阵容搭配,文明与征服阵容推荐
- 怎么获取计算机用户权限,Windows7怎么获取administrator权限?