CS练习---3D循环电子相册(详解)_3d电子相册的内容-CSDN博客

本文链接：https://blog.csdn.net/qq_44864833/article/details/122564358

要求：

用cs动画效果实现3D循环电子相册.

目标效果展示：

在这里插入图片描述
代码详解：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>电子相册</title>
		<!-- 主要思想:
		 定义两个容器,一个是展示框,用来展示电子相册的转动效果
		 一个图片容器,用来旋转固定下来的图片达到相册整体转动的效果;
		 实现流程:
		 1.确定布局:div包含div,div包好图片
		 2.位置调整:确定div的位置
		 3.固定图片:通过position中的absolute将所有图片定位在一起
		 4.分开图片:设置视觉距离perspective,定义rotate以及translateZ将图片分开
		 5.转动容器:将容纳图片的容器设置动画效果
		 6.进行完善:例如添加图片阴影,设置页面背景等-->


		<style type="text/css">
			body {
				background: url(img/ba.jpg)
					/* 设置背景图片,这里可自己换 */
			}

			.box {
				/* 设置图片容器,规定图片展示容器的大小 */
				width: 800px;
				height: 500px;
				margin: 20px auto;
			}

			/* 前后距离 */
			.photo-wrap {
				/* 因为是3D动画,所以设置视觉距离，否则只能在平面上旋转 */
				perspective: 800px;
				width: 800px;
			}

			.container {
				width: 800px;
				height: 500px;
				margin: 0 auto;
				transform-style: preserve-3d;
				/* 设置3d动画效果 animation : 动画效果名称  运行时间  动画播放效果  是否一直循环播放 */
				animation: round 10s linear infinite;
			}

			.img {
				/* 设置图片展示的大小 */
				width: 200px;
				height: 200px;
				/* 垂直居中 */
				line-height: 118px;
				/* 水平居中 */
				text-align: center;
				/* 设置图片的绝对位置,将所有图片展示在一起 */
				position: absolute;
				top: 160px;
				left: 300px;
				/* 为了让图片看起来更好看,这里通过添加box-shadow属性添加图片阴影; */
				box-shadow: 0 0 20px burlywood inset;
			}

			.i1 {
				/* 定义静止的时候的画面, 将第一张照片围绕rotateY 沿着平面直角坐标y轴旋转0度
				定义3D旋转,绕着默认值Z轴旋转   translateZ表示的是距离屏幕的远近,是通过视距perspective和translateZ实现的*/
				transform: rotateY(0deg) translateZ(320px);
				background: url(img/11.jpg);
				background-size: cover;
			}

			.i2 {
				/* 定义的translateZ为相同的320px,为了保持一样的观看效果 */
				transform: rotateY(40deg) translateZ(320px);
				background: url(img/22.jpg);
				background-size: cover;
			}

			.i3 {
				transform: rotateY(80deg) translateZ(320px);
				background: url(img/33.jpg);
				background-size: cover;
			}

			.i4 {
				transform: rotateY(120deg) translateZ(320px);
				background: url(img/44.jpg);
				background-size: cover;
			}

			.i5 {
				transform: rotateY(160deg) translateZ(320px);
				background: url(img/55.jpg);
				background-size: cover;
			}

			.i6 {
				transform: rotateY(200deg) translateZ(320px);
				background: url(img/66.jpg);
				background-size: cover;
			}

			.i7 {
				transform: rotateY(240deg) translateZ(320px);
				background: url(img/77.jpg);
				background-size: cover;
			}

			.i8 {
				transform: rotateY(280deg) translateZ(320px);
				background: url(img/88.jpg);
				background-size: cover;
			}

			.i9 {
				transform: rotateY(320deg) translateZ(320px);
				background: url(img/99.jpg);
				background-size: cover;
			}

			/* 这里定义的动画函数是让container(存放照片的容器)动起来,达到循环的效果 */
			@keyframes round {
				from {
					transform: rotateY(0deg);
				}

				to {
					transform: rotateY(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<!-- 背景容器 -->
			<div class="photo-wrap">
				<!-- 存放相册的容器 -->
				<div class="container">
					<div class="img i1"></div>
					<div class="img i2"></div>
					<div class="img i3"></div>
					<div class="img i4"></div>
					<div class="img i5"></div>
					<div class="img i6"></div>
					<div class="img i7"></div>
					<div class="img i8"></div>
					<div class="img i9"></div>
				</div>
			</div>
		</div>
	</body>
</html>