3d旋转相册
1.首先所有的图片的容器绝对定位,叠放在一起,然后一次设置rotateY依次增加45deg , 然后为每个图片的容器设置translateZ,向Z轴方向移动500px,所有图片会从对应的角度向外移动,像圆形一样展开。
2.创建动画,让rotateY旋转360deg。然后给盒子添加动画,时间为16s,设置linear和infinite,让动画匀速无限次播放。
3.给最后一张图片设置反向旋转,就可以使其看起来是静止的。
源代码:
<style>
@keyframes anima {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
body {
perspective: 800px;
transform-style: preserve-3d;
}
.box {
margin: 300px auto;
/* position: absolute;
top: 400px;
left: 0;
right: 0;
bottom: 0;
margin: auto; */
width: 300px;
height: 200px;
transform: rotateX(20deg);
transform-style: preserve-3d;
animation: anima 16s linear infinite;
}
.box img {
position: absolute;
width: 300px;
height: 200px;
}
.box img:nth-child(1) {
transform: rotateY(45deg) translateZ(500px);
}
.box img:nth-child(2) {
transform: rotateY(90deg) translateZ(500px);
}
.box img:nth-child(3) {
transform: rotateY(135deg) translateZ(500px);
}
.box img:nth-child(4) {
transform: rotateY(180deg) translateZ(500px);
}
.box img:nth-child(5) {
transform: rotateY(225deg) translateZ(500px);
}
.box img:nth-child(6) {
transform: rotateY(270deg) translateZ(500px);
}
.box img:nth-child(7) {
transform: rotateY(315deg) translateZ(500px);
}
.box img:nth-child(8) {
transform: rotateY(360deg) translateZ(500px);
}
.box img:nth-child(9) {
transform: rotateY(0) translateZ(0);
animation: img9 16s infinite linear;
}
@keyframes img9 {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-360deg);
}
}
</style>
<body>
<div class="box">
<img src="./p1.jpeg" alt="">
<img src="./p2.jpeg" alt="">
<img src="./p3.jpeg" alt="">
<img src="./p4.jpeg" alt="">
<img src="./p5.jpeg" alt="">
<img src="./p6.jpeg" alt="">
<img src="./p7.jpeg" alt="">
<img src="./p8.jpeg" alt="">
<img src="./00.jpeg" alt="">
</div>
</body>
效果图: