html实现旋转木马效果

最新推荐文章于 2024-03-31 12:49:39 发布

朝去夜来

最新推荐文章于 2024-03-31 12:49:39 发布

阅读量724

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html css3 css

本文链接：https://blog.youkuaiyun.com/wenqi1/article/details/123401344

html 专栏收录该内容

19 篇文章

订阅专栏

效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				perspective: 800px;
			}

			section {
				position: relative;
				width: 300px;
				height: 150px;
				margin: 250px auto;
				transform-style: preserve-3d;
				/* 添加动画效果*/
				animation: rotate 10s linear infinite;
			}
			section:hover{
				/* 鼠标放入section,停止动画 */
				animation-play-state: paused;
			}
			@keyframes rotate{
				0%{
					transform: rotateY(0);
				}
				100%{
					transform: rotateY(360deg);
				}
			}

			section div {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background: url(icon_8.jpg) no-repeat;
			}
			/* 可省略 */
			section div:nth-child(1) {
				transform: translateZ(400px);
			}

			section div:nth-child(2) {
				transform: rotateY(60deg) translateZ(400px);
			}

			section div:nth-child(3) {
				transform: rotateY(120deg) translateZ(400px);
			}

			section div:nth-child(4) {
				transform: rotateY(180deg) translateZ(400px);
			}

			section div:nth-child(5) {
				transform: rotateY(240deg) translateZ(400px);
			}

			section div:nth-child(6) {
				transform: rotateY(300deg) translateZ(400px);
			}
		</style>
	</head>
	<body>
		<section>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</section>
	</body>
</html>