3D动画——导航栏,鼠标悬停,盒子翻转(CSS)

最新推荐文章于 2025-04-24 16:46:33 发布

Σ'αγαπώ.

最新推荐文章于 2025-04-24 16:46:33 发布

阅读量1.2k

点赞数 18

CC 4.0 BY-SA版权

分类专栏： css 文章标签： 3d css 前端

本文链接：https://blog.youkuaiyun.com/CYX_COMnn/article/details/144207169

css 专栏收录该内容

4 篇文章

订阅专栏

前言

本篇文章
关于本篇文章的内容,是一个3D的过渡效果,在鼠标滑入悬停,盒子翻转.

效果图

在这里插入图片描述

3D翻转导航栏

思路

在一个大盒子内包裹两个宽高相同的小盒子,使用绝对定位,让两个盒子重叠在一起,
开启3D空间,给盒子添加旋转,使用transform: translate();调整盒子的位置
给大盒子使用鼠标悬浮属性(hover) ,让鼠标悬浮在盒子上时,盒子翻转,
添加过渡效果,让盒子翻转时又一个翻转的效果,不会特别生硬

实现步骤

	/* 外层大盒子,包裹导航栏里的翻转按钮 */
		.content {
			width: 740px;
			height: 34px;
			margin: 100px auto; /* 距离顶部100px 水平居住 */
		}
		.item{
			position: relative; /* 父相子绝 */
		}

		.box1 {
			width: 100px;
			height: 34px;
			background:#30aca4;
			position: absolute;
		}
		/* 翻转后显示的盒子 */
		.box2 {
			width: 100px;
			height: 34px;
			background: linear-gradient(to top , #256b65,#38b0a8);/* 从下向上渐变背景色 */
			position: absolute;
		}

<div class="content">
		<div class="item">
			<div class="box1">第一个</div>
			<div class="box2">第二个</div>
		</div>
	</div>

在这里插入图片描述
上图便是哦思路一的实现效果,因为使用了结对定位让两个盒子重叠在一起,所以box(第二个)会覆盖box1(第一个)盒子,

	.item{
			position: relative; /* 父相子绝 */
			transform-style: preserve-3d;/* 开启3D空间 */
			transform: rotateX(20deg) rotateY(30deg);
			text-align: center;
			line-height: 34px;
		}

		.box1 {
			width: 100px;
			height: 34px;
			background:#30aca4;
			position: absolute;
			transform: translateZ(17px);
		}
		/* 翻转后显示的盒子 */
		.box2 {
			width: 100px;
			height: 34px;
			background: linear-gradient(to top , #256b65,#38b0a8);/* 从下向上渐变背景色 */
			transform:translateY(17px) rotateX(-90deg) ;
			position: absolute;
	}

查看代码,首先给父盒子添加了一个x轴和y轴的旋转,让和盒子又一个倾斜的角度,方便观察
之后给box1一个z轴的距离,让box1向前移动17px的距离,再给box2一个绕X轴-90deg的旋角度,(这里为什么给的是-90deg的旋转角而不是90deg。在鼠标悬停,盒子翻转后,展示给用户的文字应该是正向的,如果给的旋转角度是90deg,盒子翻转后,砖石给用户的文字是反向的,如下图}
在这里插入图片描述
之后再给box2向下移动17px的位移.让box1下边与bxo2的上边拼接在一起(如下方效果图)

最后一步就是鼠标悬停之后让盒子翻转了,显示box2(第二个)
我们给box1,box2盒子的父级添加鼠标悬停,因为box1和box2盒子拼接子一起的,给box1和box2盒子添加hover,会分开执行效果,所以在这里要给小盒子的父级添加,让item盒子绕x轴旋转90deg的角度,为了让反转的效果不是特别生硬,需要给item盒子添加一个过渡效果,让盒子翻转的时间为0.5s.让用户看到盒子翻转的过程

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/* 去除默认样式 */
		html,body {
			margin:0;
			padding: 0;
		}
		/*	给视口添加背景色	*/
		body {
			background-color: #ccc;
		}
		/* 外层大盒子,包裹导航栏里的翻转按钮 */
		.content {
			width: 740px;
			height: 34px;

			margin: 100px auto; /* 距离顶部100px 水平居住 */
		}
		.item{
			position: relative; /* 父相子绝 */
			transform-style: preserve-3d;/* 开启3D空间 */
			transition :all .5s ;
			text-align: center;
			line-height: 34px;
		}

		.box1 {
			width: 100px;
			height: 34px;
			background:#30aca4;
			position: absolute;
			transform: translateZ(17px);
		}
		/* 翻转后显示的盒子 */
		.box2 {
			width: 100px;
			height: 34px;
			background: linear-gradient(to top , #256b65,#38b0a8);/* 从下向上渐变背景色 */
			transform:translateY(17px) rotateX(-90deg) ;
			position: absolute;
		}
		.item:hover{
			transform: rotateX(90deg);
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="item">
			<div class="box1">第一个</div>
			<div class="box2">第二个</div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述
以上便是关于鼠标悬停,盒子盒子翻转的思路以及代码了,如果弄一行需要显示多个,可以复制粘贴item盒子与其内容,之后通过弹性盒子布局,或者是浮动给item盒子添加外边距即可

总结

这是已给非常简单的3D的交互效果,其中的难点是,给box2添加角度,让盒子翻转时,盒子内的文字正向展示给用户,其次是3D对于初学者或者是立体空间感不好的人,在调整位置,旋转的会分不清方向。
关于本篇文章,如果文章中出现错误,不足等,请在评论区留言小编,小编在里及时更改,如果有更简便的方法,也请留言小编,小编也会继续学习改进。