CSS3实现3d图片旋转动画效果

article/2025/9/25 0:04:38

1.实现原理

1.首先所有的图片的容器position:absolute，叠加在一起，然后一次设置rotateY分别为（36*i）deg ，i取0到10 ；所有图片会相交成一个类似花的形状然后为每个图片的容器设置translateZ，所有图片会从对应的角度向外移动，扩展成一个大圆，即下图效果
2.创建动画，让rotateY每次增加90deg旋转起来即可。同时，为了观察效果，让rotateX依次上下移动10deg。

在这里插入图片描述

2.HTML文件

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>3D旋转</title><link rel="stylesheet" type="text/css" href="style.css"></head>
<body>
<div id="photo_box"><img src="image/1.jpg"><img src="image/2.jpg"><img src="image/3.jpg"><img src="image/4.jpg"><img src="image/5.jpg"><img src="image/6.jpg"><img src="image/7.jpg"><img src="image/8.jpg"><img src="image/9.jpg"><img src="image/10.jpg"><img src="image/11.jpg">
</div>
</body>
</html>

3.CSS3文件

*{padding: 0;margin: 0;
}/*背景设置为黑色*/
body{background:#000;
}/*设置相册盒子大小、位置、外边框、旋转参数*/
#photo_box{width: 280px;height: 400px;position: fixed;left: 0;right: 0;top:0;bottom: 0;margin: 200px auto;transform-style: preserve-3d;/*表示所有子元素在3D空间中呈现*/transform: rotateX(-5deg) rotateY(0deg);animation: run 30s linear infinite;/*循环执行run动画，每30秒执行一次*/
}/*设置图像大小、边框、圆角、位置*/
#photo_box img{width: 250px;height: 350px;border: 5px solid #ccc;border-radius: 5px;position: absolute;left: 0;top: 0;
}/*依次设置图像盒子中每个图像旋转后位置*/
#photo_box img:nth-child(1){transform: rotateY(0deg) translateZ(500px);
}
#photo_box img:nth-child(2){transform: rotateY(36deg) translateZ(500px);
}
#photo_box img:nth-child(3){transform: rotateY(72deg) translateZ(500px);
}
#photo_box img:nth-child(4){transform: rotateY(108deg) translateZ(500px);
}
#photo_box img:nth-child(5){transform: rotateY(144deg) translateZ(500px);
}
#photo_box img:nth-child(6){transform: rotateY(180deg) translateZ(500px);
}
#photo_box img:nth-child(7){transform: rotateY(216deg) translateZ(500px);
}
#photo_box img:nth-child(8){transform: rotateY(252deg) translateZ(500px);
}
#photo_box img:nth-child(9){transform: rotateY(288deg) translateZ(500px);
}
#photo_box img:nth-child(10){transform: rotateY(324deg) translateZ(500px);
}
#photo_box img:nth-child(11){transform: rotateY(360deg) translateZ(500px);
}/*采用@keyframes 规则创建run动画。*/
@keyframes run {0%{transform: rotateX(0deg) rotateY(0deg);}25%{transform: rotateX(10deg) rotateY(90deg);}50%{transform: rotateX(0deg) rotateY(180deg);}75%{transform: rotateX(-10deg) rotateY(270deg);}100%{transform: rotateX(0deg) rotateY(360deg);}
}