情人节快到了，我用前端知识做了一个关于“她”的3D旋转相册

最新推荐文章于 2024-08-10 08:03:25 发布

坚持不懈的大白

最新推荐文章于 2024-08-10 08:03:25 发布

阅读量2.7k

点赞数 9

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/qq_45404396/article/details/113755040

版权

前端专栏收录该内容

52 篇文章 5 订阅

订阅专栏

运用HTML、CSS做一个旋转相册

前言

话说情人节快到了，虽然我到现在还没有女朋女，但是这不要紧，就为未来的女朋女做一个旋转相册吧！

文章目录

- - 运用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
运行结果: