实现旋转木马的效果

最新推荐文章于 2024-08-18 10:49:07 发布

Wrj6811

最新推荐文章于 2024-08-18 10:49:07 发布

阅读量764

点赞数

分类专栏：前端小功能 css

本文链接：https://blog.csdn.net/Wrj6811/article/details/105052227

版权

前端小功能同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				perspective: 1500px;
			}
			section {
				width: 300px;
				height: 200px;
				margin: 150px auto;
				position: relative;
				transform-style: preserve-3d;
				animation: move 10s linear infinite;
				background: url(../lib/image/katong.jpg) no-repeat;
			}
			section:hover {
				animation-play-state:paused ;
			}
			section div {
				width: 300px;
				height: 200px;
				position: absolute;
				top: 0;
				left: 0;
				background: url(../lib/image/car.png) no-repeat;
				background-size: 300px 200px;
			}
			section div:nth-child(1) {
				transform: translateZ(300px);
			}
			section div:nth-child(2) {
				transform: rotateY(60deg) translateZ(300px);
			}
			section div:nth-child(3) {
				transform: rotateY(120deg) translateZ(300px);
			}
			section div:nth-child(4) {
				transform: rotateY(180deg) translateZ(300px);
			}
			section div:nth-child(5) {
				transform: rotateY(240deg) translateZ(300px);
			}
			section div:nth-child(6) {
				transform: rotateY(300deg) translateZ(300px);
			}
			@keyframes move{
				0% {
					transform: rotateY(0);
				}
				100% {
					transform: rotateY(360deg);
				}
			}
				
		</style>
	</head>
	<body>
		<section>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</section>
	</body>
</html>