3D立体相册 html+css
前言
用css的transform属性做一个3D相册~~~
值translate表示偏移;
scale表示缩放;
rotate就是转动。
一、先看效果
二、实现步骤
1.我们知道一个正方体有6个面,所以定义一个父亲元素然后定义6个子元素作为6个面。每个面放一张图片。里面q1表示前面,h2表示后面,以此类推,就是首拼音。
<div class="baba"><div class="q1"> <img src="3d/1q.png"> </div><div class="h2"> <img src="3d/2h.png"> </div><div class="z3"> <img src="3d/3z.png"> </div><div class="y4"> <img src="3d/4y.png"> </div><div class="s5"> <img src="3d/5s.png"> </div><div class="x6"> <img src="3d/6x.png"> </div> </div>
2.让父元素定位,设立方体长宽,然后必须添加属性transform-style: preserve-3d;
.baba{position: relative;width: 300px;height: 300px;transform-style: preserve-3d;}
3.让子元素和图片跟父元素一样长宽。让它有点透明度。
.baba div{position: absolute;width: 100%;height: 100%;opacity: 0.8;}.baba img{width: 100%;height: 100%;}
4.重要一步,给6个面设置位置。
.q1{transform: translateZ(150px);}.h2{transform: rotateY(180deg) translateZ(150px);}.z3{transform: rotateY(-90deg) translateZ(150px);}.y4{transform: rotateY(90deg) translateZ(150px);}.s5{transform: rotateX(90deg) translateZ(150px);}.x6{transform: rotateX(-90deg) translateZ(150px);}
5.这样立方体就设置好了,不过我们看不出来,所以让立方体转起来。给父元素添加animation属性
.baba{position: relative;width: 300px;height: 300px;transform-style: preserve-3d;animation: zuan 6s linear alternate infinite;}
@keyframes zuan{0%,5%{transform: rotateY(90deg);}20%,25%{transform: rotateY(180deg);}40%,45%{transform: rotateY(270deg);}60%,65%{transform: rotateX(-90deg);}80%,85%{transform: rotateX(0deg);}95%,100%{transform: rotateX(90deg);}}
完整代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;box-sizing: border-box;}body{height: 100vh;display: flex;justify-content: center;align-items: center;background: radial-gradient(circle, #e4e7e4, #111111);}.baba{position: relative;width: 300px;height: 300px;transform-style: preserve-3d;animation: zuan 6s linear alternate infinite;}.baba div{position: absolute;width: 100%;height: 100%;opacity: 0.8;}.baba img{width: 100%;height: 100%;}.q1{transform: translateZ(150px);}.h2{transform: rotateY(180deg) translateZ(150px);}.z3{transform: rotateY(-90deg) translateZ(150px);}.y4{transform: rotateY(90deg) translateZ(150px);}.s5{transform: rotateX(90deg) translateZ(150px);}.x6{transform: rotateX(-90deg) translateZ(150px);}@keyframes zuan{0%,5%{transform: rotateY(90deg);}20%,25%{transform: rotateY(180deg);}40%,45%{transform: rotateY(270deg);}60%,65%{transform: rotateX(-90deg);}80%,85%{transform: rotateX(0deg);}95%,100%{transform: rotateX(90deg);}}</style>
</head>
<body><div class="baba"><div class="q1"> <img src="3d/1q.png"> </div><div class="h2"> <img src="3d/2h.png"> </div><div class="z3"> <img src="3d/3z.png"> </div><div class="y4"> <img src="3d/4y.png"> </div><div class="s5"> <img src="3d/5s.png"> </div><div class="x6"> <img src="3d/6x.png"> </div> </div></body>
</html>
总结
3D旋转立方体相册做好了~~~~
3D立体相册 html+css相关推荐
- 3D立体相册不过是冷锋蓝plus版 html+css
一.话不多,先看效果: 转念一想,好像很久很久没出css特效的文章了,特别是工作之后,更少了.偶然翻看电脑内存的时候,发现这个自己1年多以前写的特效,甚美,又勾起我一段尘封的回忆...我原来也发过3D ...
- css3 3D立体相册实现
这几天无聊,看到有博主弄的电子相册有点意思,就照葫芦画瓢也实现了一个,一个半透明的正方体包含着一个小正方体,相册自动旋转,当获得焦点时变化效果,截图如下: 一,代码目录结构 二,html代码 < ...
- 还在买鲜花送女神?手把手教你搭建3D立体相册网站,包女神稀饭
是不是一款人见人爱的相册网站,看下图演示马上知晓.360度3D立体旋转,随意放大缩小任一张照片,合适每一个女生的小胃口,保证女神眼前一亮,对您刮目相看. 我们的特点是--情人节圣诞节女神生日纪念日都适 ...
- 抖音3d相册html代码,抖音3D立体相册表白代码.doc
抖音3D立体相册表白浪漫代码 首先先建立html文件 css-3d旋转 之后再新建一个CSS的文件夹 并在css文件夹中建立txt文件,并且把代码复制进去,修改后缀名为.css html{ backg ...
- 搭载3D立体相册网页 加入背景音乐 真香!
一.3D立体相册 HTML代码 <!DOCTYPE html> <html lang="en"><head><meta
- H5 3d立体相册 CSS3特性
CSS3 变形特性,立方相册,3d旋转 之前看见过3d效果的立体相册,挺羡慕的,现在自己也有机会实现属于自己的3d立体相册了~~~话不多说,开搞- 一, 准备材料 六张自己喜欢的图片,六个面,怎么简单 ...
- HTML5七夕情人节表白网页(流星雨3D旋转相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤流星雨3D旋转相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程 ...
- 抖音程序员HTML相册,快手抖音程序员表白女朋友3D立体相册源码html网页相册代码...
前几天分享了一套源码,今天又为大家带来一套类似的源码,希望大家喜欢! 快手抖音很火的程序员女朋友3D立体相册源码html网页相册代码,经测试在IE8浏览器下无法预览,建议使用支持HTML5与css3效 ...
- 3D立体相册模板(大小可更改)
这一次代码里面加入了注释,标注了如果要更改大小需要更改的数据,以便大家更好地使用~ <!Doctype html> <html lang="en">< ...
最新文章
- 有时间看下这个,分布式缓存,提高并发的
- 5首页加载慢_UIViewController 预加载方案浅谈
- netstat 和 losf
- asterisk 扩展应用(3)——IVR 实现
- openresty package.path require 报错
- 同步锁 php,python线程中同步锁详解
- uniapp对象怎么获取值_原理 | 怎么获取PMSM电机转子位置Offset值
- win10 dcom服务器进程占用cpu,WIN10CPU百分百,Windows10 DCOM占用过高解决办法 | 帮助信息-动天数据...
- 写出一下Java方法对应的签名_Java中的方法签名是否包含其返回类型?
- Android动画学习笔记
- [LeetCode][easy]Roman to Integer
- 计算机组成原理累加器实验,计算机组成原理实验教学的探讨.doc
- mac 谷歌浏览器翻译问题
- linux uwsgi 非root,只能以root身份运行uwsgi
- 如何在CSDN删除自己上传的资源
- 数据科学家必备的5种离群点/异常检测方法
- 【精】Verilog语言缩写规范
- 视频直播技术详解之现代播放器原理
- 基于Python回归模型的异方差性分析
- Trac - Trac Download - Trac下载
热门文章
- 美国服务贸易进出口额数据 (1999-2019年)
- 信息检索——BM25算法实现(自己写)
- mysql 集合 思想_面向集合的思维编写SQL(第九篇 --- “我说的是:苹果柿子李子栗子梨的那个橘子啊”)...
- linux使分区生效,Linux 硬盘分区生效命令partprobe
- 预计销售额超20亿 长城汽车新能源购车节收获4万订单
- 【C++入门】烦人的引用
- MYSQL 按名字分组查询最好成绩
- Wap开发技术问题大全
- python socket编程 实现简单p2p聊天程序
- Java,基于简单输入的薪水计算器