用CSS实现一个抖音上很火的3D相册，首先看下效果图。
3D相册.gif
首先创建index.html文件，其中主要包含2个列表，用来表示放图片的正方体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='UTF-8'>
<title>CSS实现3D相册特效</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="box">
<ul class="minbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol class="maxbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
接下来是主要部分css文件。
@charset "utf-8";
* {
margin:0;
padding:0;
}
body {
max-width: 100%;
min-width: 100%;
height: 100%;
background-size: cover; /* 按照等比缩放铺满整个区域 */
background-repeat: no-repeat;
background-attachment: fixed;
position: absolute;
margin-left: auto;
margin-right: auto;
}
li {
list-style: none;
}
.box {
width: 200px;
height: 200px;
background-size: cover;
position: absolute;
margin-left: 42%;
margin-top: 22%;
transform-style: preserve-3d;
transform: rotateX(13deg);
animation: move 5s linear infinite;
}
.minbox {
width: 100px;
height: 100px;
position: absolute;
left: 50px;
top: 30px;
-transform-style: preserve-3d;
}
.minbox li {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
}
.minbox li:nth-child(1) {
background: url(img/01.jpg) no-repeat 0 0;
transform:translateZ(50px);
}
.minbox li:nth-child(2) {
background: url(img/02.jpg) no-repeat 0 0;
transform: rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3) {
background: url(img/03.jpg) no-repeat 0 0;
transform: rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4) {
background: url(img/04.jpg) no-repeat 0 0;
transform: rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5) {
background: url(img/05.jpg) no-repeat 0 0;
transform: rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6) {
background: url(img/06.jpg) no-repeat 0 0;
transform: rotateY(90deg) translateZ(50px);
}
.maxbox {
width: 800px;
height: 400px;
position: absolute;
left: 0;
top: -20px;
transform-style: preserve-3d;
}
.maxbox li {
width: 200px;
height: 200px;
background: #fff;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
opacity: 0.2;
transition: all 1s ease;
}
.maxbox li:nth-child(1){
background: url(img/11.jpg) no-repeat 0 0;
transform:translateZ(100px);
}
.maxbox li:nth-child(2) {
background: url(img/12.jpg) no-repeat 0 0;
transform: rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3) {
background: url(img/13.jpg) no-repeat 0 0;
transform: rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4) {
background: url(img/14.jpg) no-repeat 0 0;
transform: rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5) {
background: url(img/15.jpg) no-repeat 0 0;
transform: rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6) {
background: url(img/16.jpg) no-repeat 0 0;
transform: rotateX(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1) {
transform:translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(2) {
transform:rotateX(180deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(3) {
transform:rotateX(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(4) {
transform:rotateX(90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(5) {
transform:rotateY(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
@keyframes move {
0% {
transform: rotateX(13deg) rotateY(0deg);
}
100% {
transform: rotateX(13deg) rotateY(360deg);
}
}
对其中的一些关键样式进行学习：
transform 属性实现元素转换，允许元素进行旋转、缩放、移动和倾斜。
transform--style属性指定嵌套元素是怎样在三维空间中呈现。可选择的值包括flat（2D平面）和preserve-3d（3D平面）。
animation属性包括6个动画属性，分别是
| 值 | 描述 |
|---|---|
| animation-name | 规定要绑定到选择器的keyframe名称 |
| animation-duration | 完成动画花费时间 |
| animation-timing-funciton | 动画的速度曲线 |
| animation-delay | 动画开始之前的延迟 |
| animation-iteration-count | 动画应该播放的次数 |
| animation-direction | 是否轮流反向播放动画 |
其中keyframes定义在了文件最后，用来创建动画，0％是开头动画，100％是当动画完成。
然后就是需要定义每一面的图片，注意小图是100px×100px，大图是400px×400px，其中第二张图是头朝下的。
网友评论