实现旋转木马效果

最新推荐文章于 2024-09-14 22:46:39 发布

superXiaoyun

最新推荐文章于 2024-09-14 22:46:39 发布

阅读量151

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/superXiaoyun/article/details/126352366

版权

实现旋转木马效果

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.body {

		}
		.main {
			perspective: 2000px;
			width: 360px;
			height: 240px;
			margin: 250px auto;
			position: relative;
 		}
		.imgList {
			/*width: 360px;
			height: 240px;*/
			position: relative;
			transform-style: preserve-3d;
			animation: rotate linear infinite 10s;
		}
		@keyframes rotate {
			100% {
				transform: rotateY(360deg);
			}
		}
		img {
			-webkit-box-reflect: below 5px
			-webkit-linear-gradient(transparent 10%, rgba(255, 255, 255, 0.3));
			width: 360px;
			height: 240px;
			position: absolute;
			left: 0;
			top: 0;
		}
		img:nth-of-type(1) {
			transform: translateZ(360px);
		}
		img:nth-of-type(2) {
			transform: rotateY(120deg) translateZ(360px);
		}
		img:nth-of-type(3) {
			transform: rotateY(240deg) translateZ(360px);
		}
	</style>
</head>
<body>
	<div class="body">
		<div class="main">
			<div class="imgList">
				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1115%2F092621094155%2F210926094155-9-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662862881&t=5a974f2ec591e96172878936fc59ef84">

				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0Z320111T2%2F200Z3111T2-4-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662862881&t=b8630669de330283c55c082df4e750c2">

				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F0F420110430%2F200F4110430-11-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662862881&t=6507112020043ca1cbf5046df8cd40a0">
				
			</div>
		</div>
	</div>
	
</body>
</html>