炫酷的3D相册

news/2024/10/30 19:32:14/

3D相册

使用html+css制作一个独属于自己的炫酷相册

图片超过六张的可自行修改样式调整角度和大小
背景样式未写入,需要可查看背景渐变动画

3D相册

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box1"><ul class="minbox1"><li></li><li></li><li></li><li></li><li></li><li></li></ul><ul class="minbox2"><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>
</body>
</html>
.box1 {position: relative;width: 500px;height: 500px;margin: 200px auto;transform-style: preserve-3d;animation: move1 10s infinite linear;
}ul {list-style: none;
}/* 内盒子样式 */
.minbox1 {width: 250px;height: 250px;position: absolute;margin: 125px;transform-style: preserve-3d;
}
.minbox1 li {width: 250px;height: 250px;position: absolute;
}.minbox1 li:nth-child(1) {background: url("./img/01.jpg") no-repeat;background-size: cover;transform: translateZ(125px);transition: transform 1.5s;          /* 鼠标离开样式还原时所需的时间 */
}
.minbox1 li:nth-child(2) {background: url("./img/02.jpg") no-repeat;background-size: cover;transform: rotateY(90deg) translateZ(125px);transition: transform 1.5s;
}
.minbox1 li:nth-child(3) {background: url("./img/03.jpg") no-repeat;background-size: cover;transform: rotateX(90deg) translateZ(125px);transition: transform 1.5s;
}
.minbox1 li:nth-child(4) {background: url("./img/04.jpg") no-repeat;background-size: cover;transform: rotateX(180deg) translateZ(125px);transition: transform 1.5s;
}
.minbox1 li:nth-child(5) {background: url("./img/05.jpg") no-repeat;background-size: cover;transform: rotateY(-90deg) translateZ(125px);transition: transform 1.5s;
}
.minbox1 li:nth-child(6) {background: url("./img/06.jpg") no-repeat;background-size: cover;transform: rotateX(-90deg) translateZ(125px);transition: transform 1.5s;
}/*外盒子样式*/
.minbox2 {line-height: 500px;width: 500px;height: 500px;position: absolute;margin: auto;transform-style: preserve-3d;
}
.minbox2 li {width: 500px;height: 500px;position: absolute;opacity: 0.5;
}
.minbox2 li:nth-child(1) {background: url("./img/01.jpg") no-repeat;background-size: cover;transform: translateZ(220px);transition: transform 1.5s;
}
.minbox2 li:nth-child(2) {background: url("./img/02.jpg") no-repeat;background-size: cover;transform: rotateY(90deg) translateZ(220px);transition: transform 1.5s;
}
.minbox2 li:nth-child(3) {background: url("./img/03.jpg") no-repeat;background-size: cover;transform: rotateX(90deg) translateZ(220px);transition: transform 1.5s;
}
.minbox2 li:nth-child(4) {background: url("./img/04.jpg") no-repeat;background-size: cover;transform: rotateX(180deg) translateZ(220px);transition: transform 1.5s;
}
.minbox2 li:nth-child(5) {background: url("./img/05.jpg") no-repeat;background-size: cover;transform: rotateY(-90deg) translateZ(220px);transition: transform 1.5s;
}
.minbox2 li:nth-child(6) {background: url("./img/06.jpg") no-repeat;background-size: cover;transform: rotateX(-90deg) translateZ(220px);transition: transform 1.5s;
}/* 鼠标悬停时动画改变 */
.box1:hover {animation: move2 8s infinite linear;
}
/* 鼠标悬停时内盒子样式 */
.box1:hover .minbox1 li:nth-child(1) {transform: translateZ(200px);transition: transform 1s;          /* 鼠标悬停时样式变化所需的时间 */
}
.box1:hover .minbox1 li:nth-child(2) {transform: rotateY(90deg) translateZ(150px);transition: transform 1s;
}
.box1:hover .minbox1 li:nth-child(3) {transform: rotateX(90deg) translateZ(150px);transition: transform 1s;
}
.box1:hover .minbox1 li:nth-child(4) {transform: rotateX(180deg) translateZ(150px);transition: transform 1s;
}
.box1:hover .minbox1 li:nth-child(5) {transform: rotateY(-90deg) translateZ(150px);transition: transform 1s;
}
.box1:hover .minbox1 li:nth-child(6) {transform: rotateX(-90deg) translateZ(150px);transition: transform 1s;
}
/* 鼠标悬停时外盒子样式 */
.box1:hover .minbox2 li:nth-child(1) {transform: translateZ(600px);transition: transform 2s;
}
.box1:hover .minbox2 li:nth-child(2) {transform: rotateY(60deg) translateZ(600px);transition: transform 2s;
}
.box1:hover .minbox2 li:nth-child(3) {transform: rotateY(120deg) translateZ(600px);transition: transform 2s;
}
.box1:hover .minbox2 li:nth-child(4) {transform: rotateY(180deg) translateZ(600px);transition: transform 2s;
}
.box1:hover .minbox2 li:nth-child(5) {transform: rotateY(-120deg) translateZ(600px);transition: transform 2s;
}
.box1:hover .minbox2 li:nth-child(6) {transform: rotateY(-60deg) translateZ(600px);transition: transform 2s;
}@keyframes move1 {0% {transform: rotateX(10deg) rotateY(0deg);}100% {transform: rotateX(370deg) rotateY(360deg);}
}@keyframes move2 {0% {transform: rotateX(20deg) rotateY(0deg);}100% {transform: rotateX(20deg) rotateY(360deg);}
}

gitee源代码下载:https://gitee.com/xie-xiaochun/album.git


http://www.ppmy.cn/news/281035.html

相关文章

盛世昊通:广州车展那些出彩的车,你心动了吗?

近日&#xff0c;2021年度19届广州车展隆重举行&#xff0c;各种出彩车型纷纷亮相&#xff0c;让很多车友垂涎不已。无论是规模还是新车数量&#xff0c;还是车型种类&#xff0c;可谓重磅出击。从全新跑车&#xff0c;超豪华顶奢系列&#xff0c;也囊括高性价比车型&#xff0…

导师好酷啊

今天上午给导师发消息&#xff0c;约好今天下午要和老师见面交流问题。其实我也是被动&#xff0c;被逼到最后一刻才开始行动。因为上周导师说好要我这周和他讨论实验的事情。我心里也在默默想着这周马上就要过去了&#xff0c;没有办法再躲了&#xff0c;躲不过了&#xff0c;…

很不错的哟

接着完善淘宝的首页框架&#xff08;嘿嘿&#xff0c;小傻猫日常&#xff09; 具体代码见下 HTML<!DOCTYPE html> <html lang“en”> <head> <meta charset“UTF-8”> <title>DIV框架首页</title> <link href"…/CSS/text4.css&qu…

合创视觉科技平面设计工作值不值

学习平面设计不用要什么基础和天赋才能学&#xff0c;只要你热爱平面设计行业都可以学&#xff0c;门槛比较低&#xff0c;想学好就业&#xff0c;创业&#xff0c;或者当做副业接单都是可以的。   目前学习平面设计技能一般有两种学习方式&#xff0c;一种是花时间自学2-3…

抢占网吧

网吧的价值有多大&#xff1f;看看各巨头为此的争夺就知道了。从2005年开始&#xff0c;上游芯片巨头Intel和AMD便在网吧市场较劲&#xff0c;Intel专门针对网吧市场开发了“英保通”网络管理平台&#xff0c;将软硬件集成捆绑销售。但AMD惯用的低价策略&#xff0c;使其在价格…

验证通扫描仪安装使用方法

安装验证通扫描仪 一. 安装“PCI转COM转接卡”驱动程序.1. 请将硬件“PCI转COM转接卡”卡插到电脑上,开机.2. 安装硬件驱动程序. 二&#xff0e;安装扫描仪驱动程序.1. 请将扫描仪硬件连接电脑(含USB数据线、COM数据线、外置电源),并将外置电源开关打开.2. 安装扫描仪硬件驱动…

关于有盘产品市场调查

关于有盘产品市场调查 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1.MZD网络平台 公司名称&#xff1a;长沙斯普林文化传播有限公司 公司网站&#xff1a; http://www.mzdchina.com/ 公司论坛&#xff1a; http://www.mz99.com/study/ 产 品&#xff1a;MZD网络…

启悦高速公路噪音测试软件,提了启悦一段时间,车主把真实的用车感受和优缺点分享出来!...

空间够&#xff0c;配置良心&#xff0c;省油耐用&#xff01; 这些地方让我不太满意&#xff1a;手动偶尔倒档难挂入&#xff0c;离合器偏高&#xff0c;半切入状态短&#xff0c;不过给油也就不会熄火&#xff0c;后备箱盖子不好扣需要用力才能关上座椅不舒服&#xff0c;长时…