CSS动画之3D选择按钮

最新推荐文章于 2024-04-17 09:57:32 发布

最新推荐文章于 2024-04-17 09:57:32 发布

阅读量175

点赞数

分类专栏： html css js jq 文章标签： css 3d 动画

本文链接：https://blog.csdn.net/Vue1024/article/details/121783470

版权

html css js jq 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		body{
			background: blueviolet;
		}
		#box{
			width: 500px;
			margin: 100px auto;
			display: flex;
		}
		.h1{
			height: 50px;
			width: 100px;
			transition: 1s;
			transform-style: preserve-3d;
			
			
		}
		.h3{
			height: 50px;
			width: 100px;
			text-align: center;
			line-height: 50px;	
			background: #ffffff;
			position: relative;
			transform:translateZ(25px);
		}
		.h2::before{
			content: '你好';
			width: 100px;
			height: 50px;
			text-align: center;
			line-height: 50px;	
			position: absolute;
			background: pink;
			transform: translateY(25px) rotateX(90deg) rotateX(180deg)
		}
		.h1:hover{
			transform: rotateX(90deg);
		}
	</style>
	<body>
		<div id="box">
			<div class="h1">
			<div class="h2">
				<div class="h3">首页</div>
			</div>
		</div>
		<div class="h1">
			<div class="h2">
				<div class="h3">我的</div>
			</div>
		</div>
		<div class="h1">
			<div class="h2">
				<div class="h3">商城</div>
			</div>
		</div>
		<div class="h1">
			<div class="h2">
				<div class="h3">分类</div>
			</div>
		</div>
		<div class="h1">
			<div class="h2">
				<div class="h3">支付</div>
			</div>
		</div>
		</div>
		
	</body>
</html>