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
