旋转3D导航栏(2)

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

上一篇讲解了如何对案例的整体布局后，这次开始讲解如何实现旋转时的3D效果。

点击这里可查看案例。

思路

当所有content的子元素都叠在一起后，我们平视屏幕时仅仅显示的是一个平面，所以我们很难有思路去执行下一个步骤。这时候，我们可以换一个角度去看这个问题，也就是换一个角度去看这个立体直角坐标系。

上图中，z轴为虚线，因为我们并没有指定观察者与平面的距离，也就是此时它还不是真正意义上的立体直角坐标系，如果给定content3一个旋转角transform: rotateX(30deg)的话，它并不会出现3D效果。

这时，就需要在父元素上添加perspective属性。

1
2
3
4
5
6
7
8
.main{
    display: flex;
    width: 507px;
    height: 300px;
    margin: 150px auto;
    /*指定观察者与平面的距离*/
    perspective: 1000px;
}

perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。

换个角度

有了真正的立体直角坐标系后，我们可以再换个角度去看案例。

点击
点击
点击
用户视角

看到这里是不是有思路了呢？不着急，我们再一点一点的去实现它。

content1沿x轴旋转90度，content3沿x轴旋转-90度，content2不改变，则会出现一个“十字型”图形。若要将它旋转实现3D效果，还要对content添加一个属性：transform-style: preserve-3d;

接着它们根据中心点，平移，content1沿y轴负方向平移150px，content2沿z轴正方向平移150px，content3沿y轴正方向平移150px，出现的就是一个三面的矩形立方体。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.content{
    position: relative;
    width: 300px;
    height: 300px;
    /*旋转实现3D效果*/
    transform-style: preserve-3d;
}
.content1{
    background-color: #00c0a1;
    transform: translateY(-150px) rotateX(90deg);
}
.content2{
    background-color: #0f8faa;
    transform: translateZ(150px);
}
.content3{
    background-color: #fd596f;
    transform: translateY(150px) rotateX(-90deg);
}

显示距离

上面说到，perspective 属性指定了观察者与z=0平面的距离，而z>0的三维元素比正常大，所以我们与平面的距离z增加，那么平面就会显得较大。

比如“两小儿辩日”中曾提到的：太阳到了中午会离地面近，那么太阳会变大，天气也会变热。

所以，我们只需要调整元素的宽高即可。

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
.main{
    /*使用弹性盒模型，实现左右div并排布局*/
    display: flex;
    width: 507px;
    height: 300px;
    margin: 150px auto;
    /*指定观察者与平面的距离*/
    perspective: 1000px;
}
/*左边选择区域*/
.tab{
    width: 200px;
    height: 300px;
    /*给定一个左右边距*/
    margin-right: 7px;
}
/*右边内容区域*/
.content{
    position: relative;
    /*调整至原来的位置*/
    top: 20px;
    left: 7px;
    width: 260px; /*宽度减少*/
    height: 260px;/*高度减少*/
    /*旋转实现3D效果*/
    transform-style: preserve-3d;
    /*延时效果*/
    transition: 0.5s;
}
.tab1,.tab2,.tab3{
    width: 200px;
    height: 100px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 100px; 
    cursor: pointer;
}
.content1,.content2,.content3{
    /*绝对定位，脱离普通文档流*/
    position: absolute;
    width: 260px; /*宽度减少*/
    height: 260px;/*高度减少*/
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 260px; /*行高减少*/
}
.content1{
    /*平移量需要重新调整*/
    transform: translateY(-130px) rotateX(90deg);
}
.content2{
    /*平移量需要重新调整*/
    transform: translateZ(130px);
}
.content3{
    /*平移量需要重新调整*/
    transform: translateY(130px) rotateX(-90deg);
}

功能实现

完成所有的样式及布局后，我们开始实现js的点击更换css样式的功能。

  • JQuery

点击 下载 jquery-3.2.1.js文件

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script>
    $(".tab1").click(function(){
        $(".content").css("transform","rotateX(-90deg)");
    })
    $(".tab2").click(function(){
        $(".content").css("transform","rotateX(0deg)");
    })
    $(".tab3").click(function(){
        $(".content").css("transform","rotateX(90deg)");
    })
</script>
  • 原生Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    var tab1 = document.getElementsByClassName("tab1")[0];
    var tab2 = document.getElementsByClassName("tab2")[0];
    var tab3 = document.getElementsByClassName("tab3")[0];
    var content = document.getElementsByClassName("content")[0];
    tab1.addEventListener('click', function(){
        content.style.cssText="transform: rotateX(-90deg);";
    });
    tab2.addEventListener('click', function(){
        content.style.cssText="transform: rotateX(0deg);";
    });
    tab3.addEventListener('click', function(){
        content.style.cssText="transform: rotateX(90deg);";
    });
</script>

感谢认真看完的你！

0%