运用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.总结
这是小编参加的一个活动,如果读者觉得小编的这篇博文还不错的话!记得点赞!小编在此谢谢了。