利用CSS 3的3D属性及动画属性实现旋转相册
直接发车
我们首先创建一个最外层容器, id名字自定义，我们这里设置的是 div id=”main”
容器里面我们用列表添加全部图片
<body>
<div id="main">
<ul>
<li><img src="./img/123.png" ></li>
<li><img src="./img/123.png" ></li>
<li><img src="./img/123.png" ></li>
<li><img src="./img/123.png" ></li>
<li><img src="./img/123.png" ></li>
<li><img src="./img/123.png" ></li>
</ul>
</div>
</body>
1.接下来我们写CSS属性，首先我们简单的去除一下默认样式
<!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>
*{ margin:0; padding:0;}
ul{ list-style: none;}
img{ display: block;}
2.创建一个最外层容器div id=“main” id里面的名字可以自定义
我们给最外层容器先添加宽高，参考边框，整体居中，景深，和景深基点位置top
宽高自己根据情况设置，
Perspective这个属性离屏幕多远的距离去观察元素，值越大幅度越小。
perspective-origin： 景深-基点位置，观察元素的角度。
值：top bottom left right
#main{border: 1px black solid; margin: 0 auto;width: 500px; height: 300px; perspective: 1000px; perspective-origin: top;}
3. 给外层容器里面的列表添加宽高，定位，和animation动画效果时间，重复次数，动画name，3D效果
Position：relative 相对定位
Animation：这里写的是复合写法 ；
10s指的是动画运动时间
Linear指的是动画运动形式（匀速）
Infinite指的是运动次数（无限次数）
Move没有具体含义，这是只是这个逐帧动画运动的名字，名字可以自定义。
Transform-style：preserve-3d 指的是产生一个3d空间（只要是立体的效果就必须添加这个属性）
#main ul {width: 340px; height: 240px; position: relative; left: 50%; top: 0; margin-left:-170px ; animation: 10s linear infinite move; transform-style: preserve-3d;}
4.我们给第三条的属性设置一个逐帧动画
逐帧动画：会把整个运动过程，划分成100份。0%-100%
Move就是上面我们给这个逐帧动画起的一个名字
Transform：rotateY（）绕Y轴旋转多少度 单位是deg
@keyframes move {
0%{transform: rotateY(0);}
100%{transform: rotateY(360deg);}
4.给列表里面的子元素添加定位（定位在刚刚我们设置的容器里面的具体位置）
然后我们给列表的每一个子元素设置具体旋转的角度和位移位置
TranslateZ（）在Z轴位移的数值，如果不添加的话就会全部聚集在中心，达不到我们想要的效果。
#main ul li{position: absolute; left: 0; top: 100px;}
#main ul li:nth-of-type(1){transform: rotateY(0deg) translateZ(300px);}
#main ul li:nth-of-type(2){transform: rotateY(60deg) translateZ(300px);}
#main ul li:nth-of-type(3){transform: rotateY(120deg) translateZ(300px);}
#main ul li:nth-of-type(4){transform: rotateY(180deg) translateZ(300px);}
#main ul li:nth-of-type(5){transform: rotateY(240deg) translateZ(300px);}
#main ul li:nth-of-type(6){transform: rotateY(300deg) translateZ(300px);}
5. 最后当鼠标放到整个容器上面时出现整体旋转360°效果
#main:hover ul {transform: rotateY(360deg);}
最终效果图：
逆战班202
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT