CSS3实现旋转相册

最新推荐文章于 2024-07-31 10:00:56 发布

前端小li

最新推荐文章于 2024-07-31 10:00:56 发布

阅读量726

点赞数 4

分类专栏： HTML 文章标签： css3

本文链接：https://blog.csdn.net/HTML5_student/article/details/121997222

版权

HTML 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin:0;padding: 0;}
			li{list-style:none;}
			html,body{height:100%;}
			.box{
				height:100%;
				width:100%;
				background: rgb(203, 228, 166) url(背景图) no-repeat;
				background-size:  cover;
				perspective: 1200px;
			}
			.box ul{
				width:200px;
				height:300px;
				position: absolute;
				top:50%;left:50%;
				margin:-150px 0 0 -100px;
				transform-style: preserve-3d;
				animation: play  20s linear infinite; 
			}
			.box ul li{
				width:200px;
				height:300px;
				position: absolute;
				top:0;left:0;
			}
			.box ul li img{
				width:200px;
				height:300px;
			}
			.box ul li:nth-child(1){
				transform: rotateY(36deg) translateZ(500px);
			}
			.box ul li:nth-child(2){
				transform: rotateY(72deg) translateZ(500px);
			}
			.box ul li:nth-child(3){
				transform: rotateY(108deg) translateZ(500px);
			}
			.box ul li:nth-child(4){
				transform: rotateY(144deg) translateZ(500px);
			}
			.box ul li:nth-child(5){
				transform: rotateY(180deg) translateZ(500px);
			}
			.box ul li:nth-child(6){
				transform: rotateY(216deg) translateZ(500px);
			}
			.box ul li:nth-child(7){
				transform: rotateY(252deg) translateZ(500px);
			}
			.box ul li:nth-child(8){
				transform: rotateY(288deg) translateZ(500px);
			}
			.box ul li:nth-child(9){
				transform: rotateY(324deg) translateZ(500px);
			}
			.box ul li:nth-child(10){
				transform: rotateY(360deg) translateZ(500px);
			}			
			@keyframes play{
				0%{ transform: rotateX(0) rotateY(0deg) scale(1)}
				50%{ transform: rotateX(5deg) rotateY(180deg) scale(0.5)}
				100%{ transform: rotateX(0) rotateY(360deg)  scale(1)}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li><img src="图片位置" alt="" /></li>
				<li><img src="图片位置" alt="" /></li>
				<li><img src="图片位置" alt="" /></li>
				<li><img src="图片位置" alt="" /></li>
				<li><img src="图片位置" alt="" /></li>
				<li><img src="图片位置" alt="" /></li>
				<li><img src="图片位置" alt="" /></li>
				<li><img src="图片位置" alt="" /></li>
				<li><img src="图片位置" alt="" /></li>
				<li><img src="图片位置" alt="" /></li>
			</ul>
		</div> 
	</body>
</html>