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

前言

本篇文章
关于本篇文章的内容,是一个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;
		}