前言
本篇文章
关于本篇文章的内容,是一个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对于初学者或者是立体空间感不好的人,在调整位置,旋转的会分不清方向。
关于本篇文章,如果文章中出现错误,不足等,请在评论区留言小编,小编在里及时更改,如果有更简便的方法,也请留言小编,小编也会继续学习改进。