纯CSS实现抖音3D酷炫旋转相册

序言

最近在抖音上看到了一个酷炫3D旋转相册表白效果，博主我表示很是艳羡呐！而且博主也是做前端的，表示不能输给抖音上的小姐姐，于是我就自学了下CSS3的一些动画属性并实现了类似效果，现在分享给大家。

先上效果，免得没有动力去学习去实践！
另外项目源码可去我的github仓库去clone：https://github.com/CharlesTian07/3D-rotate-album，喜欢的话请star一下噢~

升级作品gif图：

 1. 准备工作

1）下载轻量级编辑器sublime text3或者vs code
2）准备好8张（最好长方形）或者12张（最好正方形）照片素材（尺寸保持一致）

2.编码工作（以12张长方形照片为例）

1）HTML部分：

2）CSS部分：

            * {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			body {
				perspective: 5000px;
			}
			.wrapper {
				perspective: 5000px;
				-webkit-transform: rotateX(15deg);
				-moz-transform: rotateX(15deg);
				transform: rotateX(15deg);
				transform-style: preserve-3d;
			}
			.min-box {
				position: relative;
				width: 405px;
				height: 270px;
				margin: 360px auto;
				transform-style: preserve-3d;
				-webkit-animation: rotate1 6s linear infinite;
				-moz-animation: rotate1 6s linear infinite;
				animation: rotate1 6s linear infinite;
			}
			.max-box {
				position: absolute;
				width: 102px;
				height: 68px;
				left: 50%;
				top: 50%;
				margin-left: -51px;
				margin-top: -34px;
				transform-style: preserve-3d;
				-webkit-animation: rotate2 6s linear infinite;
				-moz-animation: rotate2 6s linear infinite;
				animation: rotate2 6s linear infinite;
			}
			.min-box li {
				width: 405px;
				height: 270px;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0.9;
			}
			.max-box li {
				width: 102px;
				height: 68px;
				position: absolute;
				left: 0;
				top: 0;
			}
			.min-box .img1 {
				background-image: url('images/supercar1.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:translateZ(360px);
				-moz-transform:translateZ(360px);
				transform:translateZ(360px);
				animation: img1 1s linear;
			}
			.min-box .img2 {
				background-image: url('images/supercar2.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateY(90deg) translateZ(360px);
				-moz-transform:rotateY(90deg) translateZ(360px);
				transform:rotateY(90deg) translateZ(360px);
				animation: img2 1s linear;
			}
			.min-box .img3 {
				background-image: url('images/supercar3.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateY(180deg) translateZ(360px);
				-moz-transform:rotateY(180deg) translateZ(360px);
				transform:rotateY(180deg) translateZ(360px);
				animation: img3 1s linear;
			}
			.min-box .img4 {
				background-image: url('images/supercar4.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateY(270deg) translateZ(360px);
				-moz-transform:rotateY(270deg) translateZ(360px);
				transform:rotateY(270deg) translateZ(360px);
				animation: img4 1s linear;
			}
			.min-box .img5 {
				background-image: url('images/supercar5.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateX(90deg) translateZ(300px);
				-moz-transform:rotateX(90deg) translateZ(300px);
				transform:rotateX(90deg) translateZ(300px);
				animation: img5 1s linear;
			}
			.min-box .img6 {
				background-image: url('images/supercar6.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateX(450deg) translateZ(-300px);
				-moz-transform:rotateX(450deg) translateZ(-300px);
				transform:rotateX(450deg) translateZ(-300px);
				animation: img6 1s linear;
			}
			.max-box .img1 {
				background-image: url('images/supercar7.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:translateZ(51px);
				-moz-transform:translateZ(51px);
				transform:translateZ(51px);
			}
			.max-box .img2 {
				background-image: url('images/supercar8.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateY(90deg) translateZ(51px);
				-moz-transform:rotateY(90deg) translateZ(51px);
				transform:rotateY(90deg) translateZ(51px);
			}
			.max-box .img3 {
				background-image: url('images/supercar9.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateY(180deg) translateZ(51px);
				-moz-transform:rotateY(180deg) translateZ(51px);
				transform:rotateY(180deg) translateZ(51px);
			}
			.max-box .img4 {
				background-image: url('images/supercar10.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateY(270deg) translateZ(51px);
				-moz-transform:rotateY(270deg) translateZ(51px);
				transform:rotateY(270deg) translateZ(51px);
			}
			.max-box .img5 {
				background-image: url('images/supercar11.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateX(90deg) translateZ(34px);
				-moz-transform:rotateX(90deg) translateZ(34px);
				transform:rotateX(90deg) translateZ(34px);
			}
			.max-box .img6 {
				background-image: url('images/supercar12.jpg');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-webkit-transform:rotateX(450deg) translateZ(-34px);
				-moz-transform:rotateX(450deg) translateZ(-34px);
				transform:rotateX(450deg) translateZ(-34px);
			}
			@-moz-keyframes rotate1 {
				0% {
					-webkit-transform:rotateY(0deg);
					-moz-transform:rotateY(0deg);
					transform:rotateY(0deg);
				}
				100% {
					-webkit-transform:rotateY(360deg);
					-moz-transform:rotateY(360deg);
					transform:rotateY(360deg);
				}
			}
			@-webkit-keyframes rotate1 {
				0% {
					-webkit-transform:rotateY(0deg);
					-moz-transform:rotateY(0deg);
					transform:rotateY(0deg);
				}
				100% {
					-webkit-transform:rotateY(360deg);
					-moz-transform:rotateY(360deg);
					transform:rotateY(360deg);
				}
			}
			@-moz-keyframes rotate2 {
				0% {
					-webkit-transform:rotateY(0deg);
					-moz-transform:rotateY(0deg);
					transform:rotateY(0deg);
				}
				100% {
					-webkit-transform:rotateY(360deg);
					-moz-transform:rotateY(360deg);
					transform:rotateY(360deg);
				}
			}
			@-webkit-keyframes rotate2 {
				0% {
					-webkit-transform:rotateY(0deg);
					-moz-transform:rotateY(0deg);
					transform:rotateY(0deg);
				}
				100% {
					-webkit-transform:rotateY(360deg);
					-moz-transform:rotateY(360deg);
					transform:rotateY(360deg);
				}
			}
			@keyframes img1 {
				0% {
					-webkit-transform:translateZ(180px) scale(0.25, 0.25);
					-moz-transform:translateZ(180px) scale(0.25, 0.25);
					transform:translateZ(180px) scale(0.25, 0.25);
					opacity: 0.1;
				}
				100% {
					-webkit-transform:translateZ(360px) scale(1, 1);
					-moz-transform:translateZ(360px) scale(1, 1);
					transform:translateZ(360px) scale(1, 1);
					opacity: 0.9;
				}
			}
			@keyframes img2 {
				0% {
					-webkit-transform:rotateY(90deg) translateZ(180px) scale(0.25, 0.25);
					-moz-transform:rotateY(90deg) translateZ(180px) scale(0.25, 0.25);
					transform:rotateY(90deg) translateZ(180px) scale(0.25, 0.25);
					opacity: 0.1;
				}
				100% {
					-webkit-transform:rotateY(90deg) translateZ(360px) scale(1, 1);
					-moz-transform:rotateY(90deg) translateZ(360px) scale(1, 1);
					transform:rotateY(90deg) translateZ(360px) scale(1, 1);
					opacity: 0.9;
				}
			}
			@keyframes img3 {
				0% {
					-webkit-transform:rotateY(180deg) translateZ(180px) scale(0.25, 0.25);
					-moz-transform:rotateY(180deg) translateZ(180px) scale(0.25, 0.25);
					transform:rotateY(180deg) translateZ(180px) scale(0.25, 0.25);
					opacity: 0.1;
				}
				100% {
					-webkit-transform:rotateY(180deg) translateZ(360px) scale(1, 1);
					-moz-transform:rotateY(180deg) translateZ(360px) scale(1, 1);
					transform:rotateY(180deg) translateZ(360px) scale(1, 1);
					opacity: 0.9;
				}
			}
			@keyframes img4 {
				0% {
					-webkit-transform:rotateY(270deg) translateZ(180px) scale(0.25, 0.25);
					-moz-transform:rotateY(270deg) translateZ(180px) scale(0.25, 0.25);
					transform:rotateY(270deg) translateZ(180px) scale(0.25, 0.25);
					opacity: 0.1;
				}
				100% {
					-webkit-transform: rotateY(270deg) translateZ(360px) scale(1, 1);
					-moz-transform: rotateY(270deg) translateZ(360px) scale(1, 1);
					transform: rotateY(270deg) translateZ(360px) scale(1, 1);
					opacity: 0.9;
				}
			}
			@keyframes img5 {
				0% {
					-webkit-transform:rotateX(90deg) translateZ(150px) scale(0.25, 0.25);
					-moz-transform:rotateX(90deg) translateZ(150px) scale(0.25, 0.25);
					transform:rotateX(90deg) translateZ(150px) scale(0.25, 0.25);
					opacity: 0.1;
				}
				100% {
					-webkit-transform:rotateX(90deg) translateZ(300px) scale(1, 1);
					-moz-transform:rotateX(90deg) translateZ(300px) scale(1, 1);
					transform:rotateX(90deg) translateZ(300px) scale(1, 1);
					opacity: 0.9;
				}
			}
			@keyframes img6 {
				0% {
					-webkit-transform:rotateX(450deg) translateZ(-150px) scale(0.25, 0.25);
					-moz-transform:rotateX(450deg) translateZ(-150px) scale(0.25, 0.25);
					transform:rotateX(450deg) translateZ(-150px) scale(0.25, 0.25);
					opacity: 0.1;
				}
				100% {
					-webkit-transform:rotateX(450deg) translateZ(-300px) scale(1, 1);
					-moz-transform:rotateX(450deg) translateZ(-300px) scale(1, 1);
					transform:rotateX(450deg) translateZ(-300px) scale(1, 1);
					opacity: 0.9;
				}
			}

3.编码解释

主要用到transform和animation两个属性，可分别查看链接学习：
transform：https://www.runoob.com/cssref/css3-pr-transform.html
animation：https://www.runoob.com/cssref/css3-pr-animation.html

1）要选一个元素作为整个旋转的轴承，以效果中的大盒子为例：

大盒子是以class=max-box这个div为轴承的，且这个div是没有给予其任何颜色上的显示的，但它确实存在于dom中，且具有一定宽高，其他的六张图片根据其所在位置，分别分布在其六个面；

其中四个面（前后左右）在Y轴上分别进行0°、90°、180°、270°进行翻转（rotate()），在Z轴上进行像素偏移360；

上下两个面需要在X轴上分别进行90°和450°（或者-90°）翻转，在Z轴上进行像素偏移300；

这样就形成了六面的格局

2）为了初始更好的视觉效果，在初始时刻，为六个大的图片分别增加了一个动画：由小变大、由浅变深，这个效果比较容易实现，这里不再赘述。

3）主要的难点是要怎么才能实现3D渲染，有两个重要属性：

①transform-style：https://www.runoob.com/cssref/css3-pr-transform-style.html

②perspective：https://www.runoob.com/cssref/css3-pr-transform.html