html实现旋转木马效果

最新推荐文章于 2024-07-25 11:26:35 发布

朝去夜来

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量652

点赞数

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

本文链接：https://blog.csdn.net/wenqi1/article/details/123401344

版权

html 专栏收录该内容

18 篇文章 16 订阅

订阅专栏

效果：

代码：

<!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>

朝去夜来

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html实现旋转木马效果

效果：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body { perspective: 800px; } section { position: relative; width: 300px; height: 150px;.
复制链接

扫一扫

专栏目录