3D旋转棱锥

一、分析

  • 先看下最终的效果
    https://raw.githubusercontent.com/lastnigtic/presentationPIC/master/3dTriangle/0.gif
  • 一个三棱锥在旋转，视觉效果是 3D 的
    • 一个三棱锥有四个面，即四个三角形
    • 三棱锥旋转的轴是 Y 轴
  • 关于轴，请看下图
    https://raw.githubusercontent.com/lastnigtic/presentationPIC/master/3dTriangle/base.png

二、模拟

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
css: /*transform属性的使用顺序看看上一篇笔记*/
    #triangle-box{
            position: absolute;
            margin-left: 200px;
            margin-top: 200px;
        }
        .triangle, .triangle *, .triangle :before{
            position: absolute;
            margin-top: 40%;
            top: 50%;
            left: 50%;
            perspective: 1000px;
            transform-style: preserve-3d;
        }
        #triangle-box, .face{
            height: 160px;
            width: 160px;
        }
        .face{
            border-top: solid 4px #000;
            border-left: solid 4px #000;
            margin: -80px;
            transform: rotate(60deg)skewX(30deg)scaleY(.86603);
        }
        .face:before{
            box-sizing: border-box;
            margin: -67px 0 0 -87px;
            width: 160px;
            height: 136px;
            border-bottom: solid 4px #000;
            transform: scaleY(1.16)skewX(-30deg)rotate(-60deg)translateY(-50%);
            content:'';
        }
html:
    <div id="triangle-box">
        <div class="triangle">
            <div class="face"></div>
        </div>
    </div>

https://raw.githubusercontent.com/lastnigtic/presentationPIC/master/3dTriangle/1.png

  • 复制出四份，四个.face 的 div，再来调节各自的走位
    https://raw.githubusercontent.com/lastnigtic/presentationPIC/master/3dTriangle/2.png
    https://raw.githubusercontent.com/lastnigtic/presentationPIC/master/3dTriangle/3.png
    https://raw.githubusercontent.com/lastnigtic/presentationPIC/master/3dTriangle/4.png
    https://raw.githubusercontent.com/lastnigtic/presentationPIC/master/3dTriangle/5.png

  • 这里主要是计算 transform 的使用

  • 最后加上动画(绕着 Y 轴转，转动 X 轴使之有 3D 的感觉，转动 Z 轴改变摆放的方向)
    https://raw.githubusercontent.com/lastnigtic/presentationPIC/master/3dTriangle/res.gif

  • 最后附上所有代码

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
63
64
65
66
67
68
   <style type="text/css">
       #triangle-box{
           position: absolute;
           margin-left: 200px;
           margin-top: 200px;
       }
       .triangle{
           animation: rot 30s linear infinite;
       }
       @keyframes rot{
           0%{
               transform:rotateX(-14deg)rotateY(0deg)rotateZ(111deg)
           }
           100%{
               transform:rotateX(-14deg)rotateY(360deg)rotateZ(111deg)
           }
       }
       .triangle, .triangle *, .triangle :before{
           position: absolute;
           margin-top: 40%;
           top: 50%;
           left: 50%;
           perspective: 1000px;
           transform-style: preserve-3d;
       }
       #triangle-box, .face{
           height: 160px;
           width: 160px;
       }
       .face{
           border-top: solid 4px #000;
           border-left: solid 4px #000;
           margin: -80px;
           transform: rotate(60deg)skewX(30deg)scaleY(.86603);
       }
       .face:before{
           box-sizing: border-box;
           margin: -65px 0 0 -84px;
           width: 160px;
           height: 136px;
           border-bottom: solid 4px #000;
           transform: scaleY(1.16)skewX(-30deg)rotate(-60deg)translateY(-50%);
           content:'';
       }
       .face:nth-child(1){
           transform: rotateX(-90deg)translateY(46px)rotate(60deg)skewX(30deg)scaleY(.86603)
       }
       .face:nth-child(2){
           transform: rotateY(60deg)translateZ(46px)rotateX(19.47122deg)rotate(60deg)skewX(30deg)scaleY(.86603)
       }
       .face:nth-child(3){
           transform: rotateY(180deg)translateZ(46px)rotateX(19.47122deg)rotate(60deg)skewX(30deg)scaleY(.86603)
       }
       .face:nth-child(4){
           transform: rotateY(300deg)translateZ(46px)rotateX(19.47122deg)rotate(60deg)skewX(30deg)scaleY(.86603)
       }
   </style>
</head>
<body>
   <div id="triangle-box">
       <div class="triangle">
           <div class="face"></div>
           <div class="face"></div>
           <div class="face"></div>
           <div class="face"></div>
       </div>
   </div>
</body>