3d旋转相册

最新推荐文章于 2022-12-03 15:43:31 发布

clqxmt

最新推荐文章于 2022-12-03 15:43:31 发布

阅读量1.6k

点赞数 3

分类专栏： CSS 文章标签： 3d旋转相册

本文链接：https://blog.csdn.net/weixin_43755513/article/details/98636319

版权

本文详细介绍了如何实现一个3D旋转相册的效果，包括关键技术和实现步骤，帮助读者理解并掌握3D视觉效果在相册展示中的应用。

摘要由CSDN通过智能技术生成

3d旋转相册

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				width: 300px;
				height: 300px;
				position: fixed;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				transform: rotatex(10deg) rotatey(15deg);
				transform-style: preserve-3d;
				animation: play 40s infinite linear;
			}
			
			div img {
				width: 300px;
				height: 300px;
				position: absolute;
				border:1px solid #fff;/*出现s型转动的问题，给img加边框，或者把图片换成背景图片*/
			}
			
			img:nth-child(1) {
				transform: rotatey(0deg) translatez(300px);
			}
			
			img:nth-child(2) {
				transform: rotatey(60deg) translatez(300px);
			} 
			/*如果不是6张图片，需要改旋转度数，度数是用360除以图片的个数，translatez可以随意改*/
			
			img:nth-child(3) {
				transform: rotatey(120deg) translatez(300px);
			}
			
			img:nth-child(4) {
				transform: rotatey(180deg) translatez(300px);