序言
最近在抖音上看到了一個酷炫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部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 3D動畫相冊</title>
</head>
<body>
<div class="wrapper">
<ul class="min-box">
<li class="img1"></li>
<li class="img2"></li>
<li class="img3"></li>
<li class="img4"></li>
<li class="img5"></li>
<li class="img6"></li>
</ul>
<ul class="max-box">
<li class="img1"></li>
<li class="img2"></li>
<li class="img3"></li>
<li class="img4"></li>
<li class="img5"></li>
<li class="img6"></li>
</ul>
</div>
</body>
</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