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图,可自行复制代码,更改本地图片实现),关于本篇文章,如果有更好的方法,或者是错误,不足等,请在评论区留言博主,小编在这里及时更改。