前端HTM中3D动画transform-style的使用

最新推荐文章于 2024-04-05 06:04:24 发布

钱端攻城狮

最新推荐文章于 2024-04-05 06:04:24 发布

阅读量207

点赞数 1

分类专栏： HTML 文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_54932975/article/details/123240345

版权

HTML 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.root{
				width: 600px;
				height: 600px;
				background-color: pink;
				margin: 30px auto;
				/*开启3D效果 在父标签设置*/
				transform-style: preserve-3d;
				transform:rotateY(30deg) rotateX(30deg);
			}
			.root div{
				width: 300px;
				height: 300px;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				top: 0;
				margin: auto;
				
			}
			.one{
				background-color: gold;
				animation: move 3s linear infinite;
			}
			@keyframes move{
				0%{
					transform: translateZ(0);
				}
				20%{
					transform: translateZ(100px);
				}
				40%{
					transform: translateZ(0px);
				}
				60%{
					transform: translateZ(-100px);
				}
				80%{
					transform: translateZ(0px);
				}
				100%{
					transform: translateZ(0px);
				}
			}
			.two{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="root">
			<div class="one"></div>
			<div class="two"></div>
		</div>
	</body>
</html>

运行结果：
黄色方块在绿色区域上下移动
在这里插入图片描述