3D和伪3D导航

yorup

已于 2022-05-27 19:35:58 修改

阅读量100

点赞数

文章标签： 3d css html

于 2022-05-27 17:31:47 首次发布

本文链接：https://blog.csdn.net/m0_48639378/article/details/125008134

版权

1.制作伪3D导航

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪3D</title>
		<style>
			/* 清楚边距 */
			*{
				padding: 0;
				margin: 0;
			}
			/* 设置整体导航的大小 */
			ul{
				width: 1000px;
				height: 40px;
				margin: 100px auto;
				/* background-color: #555500; */
			}
			/* 设置每个动画区域的大小 */
			li{
				width: 160px;
				height: 40px;
				float: left;  /* 左浮动 */
				list-style: none; /* 清楚无序列表的符号 */
			}
			/* 设置中间文字区域 */
			.center{
				width: 80px;
				line-height: 40px;  /* 行高 */
				text-align: center;  /* 水平居中 */
				float: left; 
				background-color: aqua;
			}
			/* 设置导航块左边 */
			.left{
				transform-origin: left;
				width: 40px;
				height: 40px;
				float: left;
				background-color: #00aaff;
			}
			/* 设置导航块右边 */
			.right{
				transform-origin: right;
				width: 40px;
				height: 40px;
				float: left;
				background-color: #00aaff;
			}
			/* 鼠标悬浮表现 */
			li:hover .center{
				transform: translateY(-24px);
				box-shadow: 5px 5px 10px #666;
			}
			li:hover .left{
				transform: skewY(-30deg);
			}
			li:hover .right{
				transform: skewY(30deg);
			}
			
			
		</style>
	</head>
	<body>
		<ul>
			<li>
				<!-- 设置导航块的左边 -->
				<span class='left'></span>  
				<!-- 设置中间字体块 -->
				<span class='center'>这是首页</span>
				<!-- 设置导航块的右边 -->
				<span class='right'></span>
			</li>
			<li>
				<span class='left'></span>
				<span class='center'>这是首页</span>
				<span class='right'></span>
			</li>
			<li>
				<span class='left'></span>
				<span class='center'>这是首页</span>
				<span class='right'></span>
			</li>
			<li>
				<span class='left'></span>
				<span class='center'>这是首页</span>
				<span class='right'></span>
			</li>
			<li>
				<span class='left'></span>
				<span class='center'>这是首页</span>
				<span class='right'></span>
			</li>
		</ul>
	</body>
</html>

最后的表现效果如图：

2.制作3D翻转导航

首先外围有一个div作为整体框架，里面嵌套5个div作为每个3D图的框架，然后每个3D的div里面嵌套两个span标签，并设置绝对定位。此时显示的是第二个span标签，第一个隐藏在第二个后面。将3Ddiv想想象成一个正方体，那么第二个span想象成一个平面，要使得其成为正方体的底面，那么要向下转90°。因为是绕正方体水平轴转，所以完成后此时第二个span穿透第一个span，且正方体垂直方向的中间位置，所以第二个span需要向下平移第一个span一半的高度距离。第一个span需要向正方体的前面平移第二个span高度的一半（这里两个span高度一样）。最后设置鼠标悬浮效果。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			/* 整体框架 */
			.box{
				width: 410px;
				height: 60px;
				position: relative;
				top: 100px;
				left: 300px;
				display: flex;
				justify-content: center;
			}
			/* 每个3D区域设置 */
			div{
				width: 80px;
				height: 60px;
				position: relative;
				transition: all 3s linear;   /* 动画实现的时间 */
				transform-style: preserve-3d;  /* 让子标签具有3d属性 */
				text-align: center;
				/* border: 1px solid; */
				float: left;
			}
			/* 每个span相同的设置 */
			span{
				width: 80px;
				line-height: 60px;
				position: absolute;
			}
			/* 第一个span */
			.red{
				background-color: red;
				transform: translateZ(30px);
			}
			/* 后一个span且一开始显示在上面 */
			.yellow{
				background-color: yellow;
				transform: translateY(30px) rotateX(-90deg);
			}
			/* 必须在div前面加上父级标签，否则会使得全部都翻转 */
			.box>div:hover{
				transform: rotateX(90deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
		<div>
			<span class='red'>UI设计师</span>
			<span class='yellow'>UI设计师</span>
		</div>
		<div>
			<span class='red'>UI设计师</span>
			<span class='yellow'>UI设计师</span>
		</div>
		<div>
			<span class='red'>UI设计师</span>
			<span class='yellow'>UI设计师</span>
		</div>
		<div>
			<span class='red'>UI设计师</span>
			<span class='yellow'>UI设计师</span>
		</div>
		<div>
			<span class='red'>UI设计师</span>
			<span class='yellow'>UI设计师</span>
		</div>
		</div>
	</body>
</html>

最后的效果如下：