3D动画一一旋转相册(纯CSS,HTML)

最新推荐文章于 2025-05-02 16:03:43 发布

原创最新推荐文章于 2025-05-02 16:03:43 发布 · 1.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#3d

1.前言

旋转相册,是CSS3,3D动画中一个典型的案例,今天,我们通过CSS,和HTML来实现这个动画效果

2.效果图

3.应用技术

CSS3 3D转换

CSS3 动画

CSS 函数

4.实现步骤

       <div class="box"><!-- 外面的盒子 -->
        <ul class="list"></ul><!-- 旋转的盒子 -->
       </div>

        .box {
            width: 600px;
            height: 200px;
            border: 1px solid red;
            margin: 100px auto;
            perspective: 800px;/* 设置景深 */
        }
        .list {
            width: 600px;
            height: 200px;
            background-color: #f90;
            transition: all 2s;
        }
        .list:hover {
            transform: rotatey(100deg);
        }

首先,写一个类名为box的盒子设置宽600px,高200px

之后内部嵌套个盒子list盒子,并且给这个盒子添加hover,鼠标悬浮后让这个旋转.

为什么要让list盒子旋转呢,,因为后面我们的相片会围绕list盒子排序位置,当我们给list盒子添加旋转动画后,我们的相片也会一起旋转

下一步就是排序照片照片了

         <ul class="item">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul><!-- 旋转的盒子 -->

.item>li {
            width: 200px;
            height: 300px;
            position: absolute;
            background-color: red;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left:-100px ;
            
        }
        .item>li:nth-child(1) {
            transform:rotatey(0deg) translatez(300px);
        }
        .item>li:nth-child(2) {
            transform:rotatey(40deg) translatez(300px);
        }
        .item>li:nth-child(3) {
            transform:rotatey(80deg) translatez(300px);
        }
        .item>li:nth-child(4) {
            transform:rotatey(120deg) translatez(300px);
        }
        .item>li:nth-child(5) {
            transform:rotatey(160deg) translatez(300px);
        }
        .item>li:nth-child(6) {
            transform:rotatey(200deg) translatez(300px);
        }
        .item>li:nth-child(7) {
            transform:rotatey(240deg) translatez(300px);
        }
        .item>li:nth-child(8) {
            transform:rotatey(280deg) translatez(300px);
        }
        .item>li:nth-child(9) {
            transform:rotatey(320deg) translatez(300px);
        }

在这里,书写了9个li标签,用来放置照片,

将所有的li标签通过绝对定位,所有的盒子重叠居中,

之后让每一个li盒子,通过translatez,向前移动400px,并且transform:rotatey(),给y轴,从0开始,依次添加40deg的角度

让他们围绕中心排列(hover和过渡效果,鼠标悬停,让盒子旋转"这里是给li标签的父级,ul添加的旋转过渡")

接下来,我们就要添加动画和照片了

        <ul class="item">
            <li><img src="./../173D动画/imgs/1.jpg" alt=""></li>
            <li><img src="./../173D动画/imgs/2.jpg" alt=""></li>
            <li><img src="./../173D动画/imgs/3.jpg" alt=""></li>
            <li><img src="./../173D动画/imgs/4.jpg" alt=""></li>
            <li><img src="./../173D动画/imgs/5.jpg" alt=""></li>
            <li><img src="./../173D动画/imgs/6.jpg" alt=""></li>
            <li><img src="./../173D动画/imgs/7.jpg" alt=""></li>
            <li><img src="./../173D动画/imgs/8.jpg" alt=""></li>
            <li><img src="./../173D动画/imgs/9.jpg" alt=""></li>
        </ul><!-- 旋转的盒子 -->

@keyframes move {
			from {
				transform: rotatex(-24deg) rotateY(0deg);
			}
			to {
				transform: rotatex(-24deg) rotateY(-360deg);
			}
		}

添加img照片这里就不细说了,

关于动画效果,同样添加在类名为list的UI标签中,替换hover和过渡效果,

首先让盒子围绕x轴旋转-24deg,在相册旋转时,我们可以看到后面的图片;

之后让盒子旋转360deg,设置时间10s,匀速播放(linear),重复循环(infinite)

animation: move 10s infinite linear;

之后我们去除类名为box的边框和类名为list的背景色.

到这里,关于旋转相册就已经完成了

接下来我们就需要优化我们的代码,减少代码体积,,在这里,我使用了CSS函数。

我们是通过结构为类选择器（nth-child）来给每个li标签添加的位移和角度的，

观察代码，我们发现，li标签唯一的距离是相同的，下一个盒子，比上一个盒子添加了40deg的角度，所以我们就可以使用CSS函数的calc（）函数配合var（）来整合代码

<li style="--i:0">
	<img src="./imgs/1.jpg" alt="">
</li>

transform: rotateY(calc(var(--i)*40deg)) translatez(300px)

我们给每一个li标签添加style=“--i:0"(后面的数字以此加1，到最后一个li标签)，之后给css代码中的.list>li 内的transform：rotateY（），按照算法计算即可，

5.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,li {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .box {
            width: 600px;
            margin: 100px auto;
            perspective: 800px;/* 设置景深 */
            position: relative;
           
        }
        .item {
            width: 600px;
            height: 200px;
            animation: move 10s infinite linear;/* 盒子旋转动画 */
            transform-style: preserve-3d;/* 开启3D空间 */
       
        }
        .item>li {
            width: 200px;
            height: 300px;
            position: absolute;
            background-color: red;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left:-100px ;
            transform: rotateY(calc(var(--i)*40deg)) translatez(300px)/* css函数.计算每个盒子的旋转角度 */
        }
        .item>li>img {
             width: 200px;
            height: 300px;
        }
        @keyframes move { /* 动画规则 */
            from {
                transform: rotatex(-24deg) rotateY(0deg);
            }
            to {
                transform: rotatex(-24deg) rotateY(-360deg);
            }
        }
    </style>
</head>
<body>
        <div class="box"><!-- 外面的盒子 -->
        <ul class="item">
            <li style="--i:0"><img src="./../173D动画/imgs/1.jpg" alt=""></li>
            <li style="--i:1"><img src="./../173D动画/imgs/2.jpg" alt=""></li>
            <li style="--i:2"><img src="./../173D动画/imgs/3.jpg" alt=""></li>
            <li style="--i:3"><img src="./../173D动画/imgs/4.jpg" alt=""></li>
            <li style="--i:4"><img src="./../173D动画/imgs/5.jpg" alt=""></li>
            <li style="--i:5"><img src="./../173D动画/imgs/6.jpg" alt=""></li>
            <li style="--i:6"><img src="./../173D动画/imgs/7.jpg" alt=""></li>
            <li style="--i:7"><img src="./../173D动画/imgs/8.jpg" alt=""></li>
            <li style="--i:8"><img src="./../173D动画/imgs/9.jpg" alt=""></li>
        </ul><!-- 旋转的盒子 -->
        </div>
</body>
</html>