该换壁纸啦，记录一个用CSS和HTML做的3D立体相册

最新推荐文章于 2024-05-07 15:16:42 发布

JanusS

最新推荐文章于 2024-05-07 15:16:42 发布

阅读量839

点赞数

文章标签： css html 3d

本文链接：https://blog.csdn.net/weixin_51983891/article/details/123036526

版权

这几天看东宫沉迷于陈星旭，李承鄞太绝了！这不得把壁纸安排上？简单记录一下制作过程。

1、准备照片

需要1张大的背景图和6张3d相册用图存放在img文件夹中。

可以先使用PS、美图秀秀或者其他修图软件等将相册用图改成200px*200px。

注意文件存储位置👇

2、新建一个html文件

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>星旭同学</title>
		<link type="text/css" href="css/blingbling.css" rel="stylesheet"/><!-- 这里注意CSS文件名，路径需要与第三步中创建的文件一致 -->
	</head>

	<body>
		<div class="box">
			<ul class="minbox">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>

3、新建一个CSS文件

*{
	margin: 0;
	padding: 0;
}
body{
	background-image:url(../img/00.jpg) ;/*背景图片设置*/
	background-size: cover;
}
.box{
	position: relative;
	width: 200px;
	height:200px;
	margin-top:200px; /*3D相册位置*/
	margin-left: 850px; /*3D相册位置*/
	transform-style:preserve-3d ;
	animation: movie 10s infinite linear; /*绑定动画，注意名字与设置动画相同*/
}
.minbox{
	width: 200px;
	height: 200px;
	position: absolute;
	transform-style:preserve-3d ;
}
ul{
	list-style: none;
}
.minbox li{
	width: 200px;
	height: 200px;
	position: absolute;
}
.minbox li:nth-child(1){
	background: url(../img/01.jpg);
	transform: translateZ(100px);
}
.minbox li:nth-child(2){
	background: url(../img/02.jpg);
	transform: rotateX(180deg) translateZ(100px);
}
.minbox li:nth-child(3){
	background: url(../img/03.jpg);
	transform: rotateX(-90deg) translateZ(100px);
}
.minbox li:nth-child(4){
	background: url(../img/04.jpg);
	transform: rotateX(90deg) translateZ(100px);
}
.minbox li:nth-child(5){
	background: url(../img/05.jpg);
	transform: rotateY(-90deg) translateZ(100px);
}
.minbox li:nth-child(6){
	background: url(../img/06.jpg);
	transform: rotateY(90deg) translateZ(100px);
}
@keyframes movie{ /*设置动画*/
	0%{
		transform: rotateX(30deg) rotateZ(0deg) rotateY(0deg);
	}
	100%{
		transform: rotateX(30deg) rotateZ(360deg) rotateY(360deg);
	}
}