旋转3D导航栏(1)

发表于 | 分类于 | 阅读次数

重温了一下当初学习前端时做的一个案例————旋转3D导航栏。

点击这里可查看案例。

想要实现这个效果需要一个立体3D的空间想象能力。因为我们需要一个立体的直角坐标系来讲述特效原理。

弹性盒模型

首先将基础的布局实现以下：居中的一个大的div：宽507px，高300px。里面左、右各两个div，左侧div：宽200px，高300px。右侧div：宽300px，高300px。

但是在普通流的布局中，一个块元素在父元素中是如何排列的？

  • 从上往下排列
  • 从左开始排列
  • 一个块元素占一行

所以我们在此使用弹性盒模型display: flex;来进行左右div在父元素中并排布局。

对父元素使用弹性盒模型后：会在父元素内部生成一个横向的主轴，所有子元素都要沿着父元素的主轴排列

1
2
3
4
<div class="main">
    <div class="tab"></div>
    <div class="content"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.main{
    /*使用弹性盒模型，实现左右div并排布局*/
    display: flex;
    width: 507px;
    height: 300px;
    margin: 150px auto;
}
/*左边选择区域*/
.tab{
    width: 200px;
    height: 300px;
     /*给定一个左右边距*/
    margin-right: 7px;
}
/*右边内容区域*/
.content{
    width: 300px;
    height: 300px;
}

定位布局

左侧div中有着三个竖直排列的小div，右侧div应该有三个相等大小的三个div。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="main">
    <div class="tab">
        <div class="tab1">TOP</div>
        <div class="tab2">FRONT</div>
        <div class="tab3">BOTTOM</div>
    </div>
    <div class="content">
        <div class="content1">TOP CONTENT</div>
        <div class="content2">FRONT CONTENT</div>
        <div class="content3">BOTTOM CONTENT</div>
    </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.main{
    width: 507px;
    height: 300px;
    margin: 150px auto;
}
/*左边选择区域*/
.tab{
    width: 200px;
    height: 300px;
     /*给定一个左右边距*/
    margin-right: 7px;
}
.tab1,.tab2,.tab3{
    width: 200px;
    height: 100px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 100px; 
    /*鼠标显示成小手*/
    cursor: pointer;
}
/*右边内容区域*/
.content{
    width: 300px;
    height: 300px;
}
.content1,.content2,.content3{
    width: 300px;
    height: 300px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 300px; 
}

右侧div中的三个相等大小的div按照普通流的布局方式从上往下排列。在此，我们对三个div使用绝对定位position: absolute;,使它们脱离文档流。

这里有绝对定位的详细解释：

1
2
3
4
5
6
7
8
9
10
11
.content1,.content2,.content3{
    /*绝对定位，脱离普通文档流*/
    position: absolute;
    width: 300px;
    height: 300px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 300px; 
}

之后，我们可以在父元素.content使用相对定位position: relative;。使用相对定位后，相当于在content上面建立了一个立体直角坐标系。

content1、content2、content3相对于父元素中的位置是左上角的位置，由此假设出横向轴为x轴，竖直方向为y轴，z轴则是我们平时页面时的垂直方向。

1
2
3
4
5
.content{
    position: relative;
    width: 300px;
    height: 300px;
}

下一篇会讲解一下3D效果实现的原理。

0%