运用transforrm呈现3D旋转效果

guiqiu1111

已于 2022-09-06 23:16:30 修改

阅读量133

点赞数

文章标签： css3 html

于 2022-09-06 21:28:08 首次发布

本文链接：https://blog.csdn.net/weixin_50256767/article/details/126734201

版权

一、效果

旋转图片

二、代码实现

1、HTML部分

<div id="photos-box">
		<img src="../beijingc.jpg" alt="无法显示">
		<img src="../beijing8.jpg" alt="无法显示">
		<img src="../beijing5.jpg" alt="无法显示">
		<img src="../beijing1.jpg" alt="无法显示">
		<img src="../beijing2.jpg" alt="无法显示">
		<img src="../beijing3.jpg" alt="无法显示">
		<img src="../beijing7.jpg" alt="无法显示">
	</div>

2、CSS部分

		body{
			background: black;
		  }
		*{
			margin: 0px;
			padding: 0px;
		}
		#photos-box{
			width: 400px;
			height: 300px;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: 200px auto;
			transform-style: preserve-3d;
			transform: rotateX(-10deg) rotateY(0deg);
			animation: run 30s linear infinite;
		}
		#photos-box img{
			width: 350;
			height: 250px;
			border: 3px solid #C7C2C2;
			border-radius: 5px;
			position: fixed;
			left: 0;
			top: 0px;
		}
		#photos-box img:nth-child(1){
			transform: rotateY(0deg) translateZ(500px);
		}
		#photos-box img:nth-child(2){
			transform: rotateY(60deg) translateZ(500px);
		}
		#photos-box img:nth-child(3){
			transform: rotateY(120deg) translateZ(500px);
		}
		#photos-box img:nth-child(4){
			transform: rotateY(180deg) translateZ(500px);
		}
		#photos-box img:nth-child(5){
			transform: rotateY(240deg) translateZ(500px);
		}
		#photos-box img:nth-child(6){
			transform: rotateY(300deg) translateZ(500px);
		}
		#photos-box img:nth-child(7){
			transform: rotateY(360deg) translateZ(500px);
		}
		@keyframes run{
			 0%{transform: rotateX(0deg) rotateY(0deg); }
             20%{transform: rotateX(10deg) rotateY(72deg);}
             40%{transform: rotateX(0deg) rotateY(144deg);}
             60%{transform: rotateX(-10deg) rotateY(216deg);}
             80%{transform: rotateX(0deg) rotateY(288deg);}
			100%{transform: rotateX(10deg) rotateY(360deg);}
        }