筛子

最新推荐文章于 2024-04-09 23:45:03 发布

置顶 @CJL

最新推荐文章于 2024-04-09 23:45:03 发布

阅读量193

点赞数

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/qq_44109821/article/details/103678027

版权

笔记专栏收录该内容

10 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>筛子</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.box{width: 100px;height: 100px;position: relative;perspective: 3000px;margin: 0 auto;margin-top: 100px;transform-style: preserve-3d;transform: rotateX(-40deg) rotateY(-60deg);animation: myRotate 5s ease-in-out infinite backwards;}
			.box div{width: 100px;height: 100px;border: 1px solid #999999;background: rgba(200,200,200,0.5);position: absolute;text-align: center;font-size: 2em;color: #333333;font-weight: bold;line-height: 100px;font-family: "microsoft yahei";}
			.front{transform:translateZ(50px) ;}
			.back{transform:rotateY(180deg) translateZ(50px) ;}
			.left{transform: rotateY(90deg) translateZ(50px);}
			.right{transform:rotateY(-90deg) translateZ(50px) ;}
			.top{transform: rotateX(90deg) translateZ(50px);}
			.bottom{transform: rotateX(-90deg) translateZ(50px);}
			@keyframes myRotate{
				0%{transform: rotateX(-40deg) rotateY(-60deg);}
				50%{transform: rotateX(-360deg) rotateY(360deg);}
				0%{transform: rotateX(-40deg) rotateY(-60deg);}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="front">1</div>
			<div class="back">6</div>
			<div class="left">2</div>
			<div class="right">4</div>
			<div class="top">3</div>
			<div class="bottom">5</div>
		</div>
	</body>
</html>