之前讲解了css的入门篇，今天将要使用css技术实现动态的样式，本次以旋转3D相册为例进行学习和讲解。效果图如下：
首先需要准备7张自己喜欢的图片，并定义一个div，我这里把class类名设置成album，将7张图片使用img标签引入，在选择一张作为中间图片的img中设置class类名为mid,为后面的css设置样式做好铺垫。
接下来就进入今天的重中之重——css样式实现：还是使用内联式，在style标签中设置样式，为了清除默认数值的干扰，先使用*通配选择器将margin外边距和padding内边距设置为0，再将整个浏览页面背景设置为黑色，由于要呈现3D的效果需要使用perspective属性给父元素设置视距，这里设置为1000px。然后设置盒子的定位方式为相对定位和大小为宽240px、高150px以及3D动画相关的设置。盒子里面的照片设置为绝对定位，大小100%。
由效果图可知外面旋转的6张图片是匀速旋转的，因此它们各自围绕Y轴间隔旋转的角度是一样的，简单计算360/6=60，所以应该设置每张外面的图片Y轴间隔角度为60度，使用结构伪类选择器.album img:nth-child（）对6张照片进行旋转位置的设置。
然后使用@keyframes创建动画效果，本次效果肯定为旋转，由于如果不设置X轴的角度前面展示的图片会遮挡后排的图片，所以这里X轴也需要进行一定角度的旋转，设置效果从rotateX(-15deg) rotateY(0)到rotateX(-15deg) rotateY(360deg)，也就是让图片向前倾斜15度，每张图片旋转360度。
最后由于之前设置的是整个盒子所有图片都会旋转，导致中间的图片也会跟着旋转，效果是中间的图片不随其他6张外围图片旋转，则需要对其进行反向设置，本来从0度转到360度，反向设置从360度转回0度，从而抵消掉旋转的效果，并用伪类选择器设置当鼠标移入盒子时动画停止。
参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3d相册</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #282c34;
perspective: 1000px;
/* 视距要给父元素设置 */
}
.album {
position: relative;
width: 240px;
height: 150px;
margin: 300px auto;
transform-style: preserve-3d;
animation: rotates 20s linear infinite;
/* transform: rotateX(-15deg); */
}
@keyframes rotates {
from {
transform: rotateX(-15deg) rotateY(0) ;
}
to {
transform: rotateX(-15deg) rotateY(360deg) ;
}
}
.album img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.album img:nth-child(1) {
transform: rotateY(0deg) translateZ(300px);
}
.album img:nth-child(2) {
transform: rotateY(60deg) translateZ(300px);
}
.album img:nth-child(3) {
transform: rotateY(120deg) translateZ(300px);
}
.album img:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
}
.album img:nth-child(5) {
transform: rotateY(240deg) translateZ(300px);
}
.album img:nth-child(6) {
transform: rotateY(300deg) translateZ(300px);
}
/* .album img:nth-child(7) {
transform: rotateY(0deg) translateZ(0px);
} */
.album:hover {
animation-play-state: paused;
}
/* 反向旋转抵消 */
.album .mid {
/* reverse为关键字不能使用来做动画名，否则不生效 */
animation: reverses 20s linear infinite;
}
@keyframes reverses {
from {
transform: rotateY(360deg);
}
to {
transform: rotateY(0);
}
}
</style>
</head>
<body>
<div class="album">
<img src="./images/mv1.jpg" alt="">
<img src="./images/mv2.jpg" alt="">
<img src="./images/mv3.jpg" alt="">
<img src="./images/mv4.jpg" alt="">
<img src="./images/mv5.jpg" alt="">
<img src="./images/mv6.jpg" alt="">
<img class="mid" src="./images/mm.gif" alt="">
</div>
</body>
</html>到此关于css进阶的动画3D相册案例就简述完毕了，希望分享的东西可以帮助到大家。
标签：album,进阶,img,nth,transform,rotateY,设置,CSS,3D From： https://blog.51cto.com/u_15101214/6779113