3D 旋转相册立方体的盒子相册(源码分享)

news/2024/11/15 7:04:01/

效果图

在这里插入图片描述

css代码

*{margin: 0;padding: 0;
}
body{display: flex;justify-content: center;align-items: center;background-color: #333;min-height: 100vh;perspective: 1000px;
}
//构建 3D的空间
.con{position: relative;width: 300px;height: 300px;transform-style: preserve-3d;animation: move 5s linear infinite;
}//盒子旋转的动画
@keyframes move {0%{transform: rotateY(0deg);}100%{transform: rotateY(360deg);}
}
//让每个面居中 堆在一起
.box{position: absolute;top: 0;left: 0;width: 300px;height: 300px;opacity: 0.8;transition: 3s;background-position: center;background-color: pink;
}.box1{background-image: url(./1.jpg);background-size: cover;//x轴转动90 在拉开距离transform: rotateX(90deg) translateZ(150px);
}
.box2{background-image: url(./5.jpg);background-size: cover;//x轴转动-90 在拉开距离transform: rotateX(-90deg) translateZ(150px);
}
.box3{background-image: url(./1.jpg);background-size: cover;//y轴转动90 在拉开距离transform: rotateY(90deg) translateZ(150px);
}
.box4{background-image: url(./4.jpg);background-size: cover;//y轴转动-90 在拉开距离transform: rotateY(-90deg) translateZ(150px);
}
.box5{background-image: url(./2.jpg);background-size: cover;//向前 拉开距离transform:  translateZ(150px);
}
.box6{background-image: url(./7.jpg);background-size: cover;//向后 拉开距离transform: translateZ(-150px);
}// con 被鼠标放上去 后 每个面的方向不变 只增大距离
.con:hover .box1{//x轴转动90 在拉开距离transform: rotateX(90deg) translateZ(300px);
}
.con:hover .box2{//x轴转动-90 在拉开距离transform: rotateX(-90deg) translateZ(300px);
}
.con:hover .box3{//y轴转动90 在拉开距离transform: rotateY(90deg) translateZ(300px);
}
.con:hover .box4{//y轴转动-90 在拉开距离transform: rotateY(-90deg) translateZ(300px);
}
.con:hover .box5{//向前 拉开距离transform: translateZ(300px);
}
.con:hover .box6{//向后 拉开距离transform: translateZ(-300px);
}

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><!-- //盒子容器搭建3D空间 --><div class="con"><!-- 盒子的6个面 --><div class="box box1"></div><div class="box box2"></div><div class="box box3"></div><div class="box box4"></div><div class="box box5"></div><div class="box box6"></div></div>
</body>
</html>