当前位置：首页 > article >正文

3D导航案例

article 2024/11/27 20:10:30

一、介绍

本节内容我们来讲解一下，3D导航案例，主要运用到了css3中的3D以及过渡效果，效果如下展示，那么我们开始来学习使用css3来制作一个3D导航效果吧！

二、思路解析

制作四个面（前后上下）
1.前后上下，左右部分可以不用添加，因为旋转时看不到（注意后续讲解代码时会添加左右部分）
将四个面通过定位放到一起
开启3d空间，通过位移，旋转放置在相应的位置
填写文字
制作划入效果，再划入时让整体的盒子对于X轴进行旋转

三、代码分析

1.HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./index.css">
</head>
<body>
	<div class="all">
		<!-- 大盒子，一共六个 -->
		<div class="box">
			<!-- 前面 -->
			<div class="item1">Home</div>
			<!-- 后面 -->
			<div class="item2">Home</div>
			<!-- 上面 -->
			<div class="item3">Home</div>
			<!-- 下面 -->
			<div class="item4">Home</div>
			<!-- 左面和右面（可以不做） -->
			<div class="item5"></div>
			<div class="item6"></div>
		</div>
		<div class="box">
			<div class="item1">Services</div>
			<div class="item2">Services</div>
			<div class="item3">Services</div>
			<div class="item4">Services</div>
			<div class="item5"></div>
			<div class="item6"></div>
		</div>
		<div class="box">
			<div class="item1">Produts</div>
			<div class="item2">Produts</div>
			<div class="item3">Produts</div>
			<div class="item4">Produts</div>
			<div class="item5"></div>
			<div class="item6"></div>
		</div>
		<div class="box">
			<div class="item1">Blog</div>
			<div class="item2">Blog</div>
			<div class="item3">Blog</div>
			<div class="item4">Blog</div>
			<div class="item5"></div>
			<div class="item6"></div>
		</div>
		<div class="box">
			<div class="item1">Contact</div>
			<div class="item2">Contact</div>
			<div class="item3">Contact</div>
			<div class="item4">Contact</div>
			<div class="item5"></div>
			<div class="item6"></div>
		</div>
		<div class="box">
			<div class="item1">About Us</div>
			<div class="item2">About Us</div>
			<div class="item3">About Us</div>
			<div class="item4">About Us</div>
			<div class="item5"></div>
			<div class="item6"></div>
		</div>
	</div>
</body>
</html>

2.CSS

.all{
/*	给最外层盒子设置宽高*/
	width: 540px;
	height: 30px;
/*	让其溢出隐藏*/
	overflow: hidden;
/*	设置flex弹性布局，让盒子水平排开*/
	display: flex;
	justify-content: space-between;
/*	设置水平居中显示*/
	margin: 100px auto;
/*	开启3D空间*/
	transform-style:preserve-3d ;
}
.box{
/*	设置包着四个面的父盒子宽，高由子元素撑开*/
	width: 80px;
/*	设置定位父相子绝，这里是父级相对定位*/
	position: relative;
	/*	开启3D空间*/
	transform-style:preserve-3d ;
/*	设置过度时间*/
	transition: all .3s;
}
.item1,.item2,.item3,.item4{
/*	设置四个面的宽高，因为属性相同所以使用并集选择器设置*/
	width: 80px;
	height: 30px;
/*	设置背景颜色*/
	background: rgb(48, 172, 164);
/*	让文字水平居中*/
	text-align: center;
/*	设置行高与高相同，让盒子垂直居中*/
	line-height: 30px;
/*设置定位，子绝，子级绝对定位	*/
	position: absolute;
/*	相对于父级的位置*/
	top: 0;
	left: 0;
}
/*左右两边的盒子，可以不加*/
.item6,.item5{
	width: 30px;
	height: 30px;
	background: rgb(48, 172, 164);
	position: absolute;
	top: 0;
	left: 0;
}
/*让第一个子级对于z轴向前移动15像素*/
.item1{
	transform: translateZ(15px);
}
/*让第二个子级对于z轴后前移动15像素*/
.item2{
	transform: translateZ(-15px);
}
/*让第三个子级对于Y轴向上移动15像素，并且旋转90度，这样就盖到前后两个盒子上*/
.item3{
	transform: translateY(-15px) rotateX(90deg);
}
/*让第四个子级对于Y轴向下移动15像素，并且旋转90度，这样就盖到前后两个盒子下*/
.item4{
	transform: translateY(15px) rotateX(-90deg);
/*	设置他的背景色为一个渐变色*/
	background: linear-gradient(to bottom,rgb(48, 172, 164),rgb(38, 109, 104));
}
/*设置左右两个盒子，对于X轴进行移动，旋转90度，放置再左右两侧*/
.item5{
	transform: translateX(-15px) rotateY(90deg);
}
.item6{
	transform: translateX(15px) rotateY(90deg);
}
/*设置盒子划入效果，划入让父级盒子旋转90度*/
.box:hover{
	transform: rotateX(90deg);
}

运行结果如下