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

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>

6.总结

以上便是3D——旋转相册的实现(因为内存原因无法长传gif图,可自行复制代码,更改本地图片实现),关于本篇文章,如果有更好的方法,或者是错误,不足等,请在评论区留言博主,小编在这里及时更改。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值