运用HTML、CSS做一个旋转相册
前言
话说情人节快到了，虽然我到现在还没有女朋女，但是这不要紧，就为未来的女朋女做一个旋转相册吧！
文章目录
1.了解三个重要的CSS属性
1.1 transform-style属性
这个属性的作用是规定如何在 3D 空间中呈现被嵌套的元素。
1.2 animation属性
这个属性可以实现动画效果，读者可以参考 w3school 上的这个属性--------> animation
1.3 transform属性
因为小编要实现的是3D效果，所以本次需要用到这个属性下的六个比较重要函数，分别为rotateX(), rotateY(), rotateZ(), translateX(), translateY() ,translateZ(),其中，前三个函数里面的参数为角度，单位为 deg ，后面三个函数里面的参数为像素值(px)。
| 函数 | 含义 |
|---|---|
| rotateX | 定义沿着 X 轴的 3D 旋转。 |
| rotateY | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ | 定义沿着 Z 轴的 3D 旋转。 |
| translateX | 定义转换，只是用 X 轴的值。 |
| translateY | 定义转换，只是用 Y 轴的值。 |
| translateZ | 定义转换，只是用 Z 轴的值。 |
我们来看一下这三个属性共同实现的一个效果：
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wenti</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
list-style-type: none;
}
.main li{
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: red;
}
.main li:nth-child(2n){
background: blanchedalmond;
}
.main li:nth-child(1){
transform: rotateX(60deg) translateX(20px);
animation: rotate1 4s linear infinite alternate;
}
@keyframes rotate1{
from{
transform: rotateX(0deg) translateX(0px);}
to{
transform: rotateX(60deg) translateX(20px);}
}
.main li:nth-child(3),li:nth-child(4){
top: 0;
left: 200px;
}
.main li:nth-child(3){
transform: rotateX(60deg) translateY(20px);
animation: rotate2 4s linear infinite alternate;
}
@keyframes rotate2{
from{
transform: rotateX(0deg) translateY(0px);}
to{
transform: rotateX(60deg) translateY(20px);}
}
.main li:nth-child(5),li:nth-child(6){
top: 0;
left: 400px;
}
.main li:nth-child(5){
transform: rotateX(60deg) translateZ(20px);
animation: rotate3 4s linear infinite alternate;
}
@keyframes rotate3{
from{
transform: rotateX(0deg) translateZ(0px);}
to{
transform: rotateX(60deg) translateZ(20px);}
}
.main li:nth-child(7),li:nth-child(8){
top: 200px;
left: 0;
}
.main li:nth-child(7){
transform: rotateY(60deg) translateX(20px);
animation: rotate4 4s linear infinite alternate;
}
@keyframes rotate4{
from{
transform: rotateY(0deg) translateX(0px);}
to{
transform: rotateY(60deg) translateX(20px);}
}
.main li:nth-child(9),li:nth-child(10){
top: 200px;
left: 200px;
}
.main li:nth-child(9){
transform: rotateY(60deg) translateY(20px);
animation: rotate5 4s linear infinite alternate;
}
@keyframes rotate5{
from{
transform: rotateY(0deg) translateY(0px);}
to{
transform: rotateY(60deg) translateY(20px);}
}
.main li:nth-child(11),li:nth-child(12){
top: 200px;
left: 400px;
}
.main li:nth-child(11){
transform: rotateY(60deg) translateZ(20px);
animation: rotate6 4s linear infinite alternate;
}
@keyframes rotate6{
from{
transform: rotateY(0deg) translateZ(0px);}
to{
transform: rotateY(60deg) translateZ(20px);}
}
.main li:nth-child(13),li:nth-child(14){
top: 400px;
left: 0;
}
.main li:nth-child(13){
transform: rotateZ(60deg) translateX(20px);
animation: rotate7 4s linear infinite alternate;
}
@keyframes rotate7{
from{
transform: rotateZ(0deg) translateX(0px);}
to{
transform: rotateZ(60deg) translateX(20px);}
}
.main li:nth-child(15),li:nth-child(16){
top: 400px;
left: 200px;
}
.main li:nth-child(15){
transform: rotateZ(60deg) translateY(20px);
animation: rotate8 4s linear infinite alternate;
}
@keyframes rotate8{
from{
transform: rotateZ(0deg) translateY(0px);}
to{
transform: rotateZ(60deg) translateY(20px);}
}
.main li:nth-child(17),li:nth-child(18){
top: 400px;
left: 400px;
}
.main li:nth-child(17){
transform: rotateZ(60deg) translateZ(20px);
animation: rotate9 4s linear infinite alternate;
}
@keyframes rotate9{
from{
transform: rotateZ(0deg) translateZ(0px);}
to{
transform: rotateZ(60deg) translateZ(20px);}
}
</style>
</head>
<body>
<ul class="main">
<li></li>
<li>rotateX(60deg) translateX(20px)</li>
<li></li>
<li>rotateX(60deg) translateY(20px)</li>
<li></li>
<li>rotateX(60deg) translateZ(20px)</li>
<li></li>
<li>rotateY(60deg) translateX(20px)</li>
<li></li>
<li>rotateY(60deg) translateY(20px)</li>
<li></li>
<li>rotateY(60deg) translateZ(20px)</li>
<li></li>
<li>rotateZ(60deg) translateX(20px)</li>
<li></li>
<li>rotateZ(60deg) translateY(20px)</li>
<li></li>
<li>rotateZ(60deg) translateZ(20px)</li>
</ul>
</body>
</html>
2. 实现旋转相册
看了上述代码和运行结果，我想读者应该对于实现旋转相册应该有了一个大体的想法了。
那么具体怎样实现呢？其实，认真看上述代码的读者应该可以发现，ul标签没有设置 animation 属性，如果设置了这个属性会是什么效果呢？
看一下设置ul标签的这个属性之后的运行结果吧！
是不是发现了这是设置了ul标签的 animation 属性的结果。
当然，这也必须设置相对定位和绝对定位，不然还是无法实现这个效果的。
根据设置相对定位和绝对定位的原则，ul标签应该设置为相对定位，li标签设置为绝对定位，也就是 子 (标签) 绝 (对定位) 父 (标签)相 (对定位)
为了使旋转的相册有一个背景音乐，这里添加了一个 audio 标签
代码已经上传到github，链接为:项目3.html
运行结果:
情人节快到了，我用前端知识做了一个关于“她”的3D旋转相册
3.总结
这是小编参加的一个活动，如果读者觉得小编的这篇博文还不错的话！记得点赞！小编在此谢谢了。