正多面体css实现

这个正多面体是由很多个正方形div叠成的，虽然有很多窟窿，但是不影响整体效果。

代码

一个是html代码，一个是css代码

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="polyhedron.css">
</head>

<body>
<div class="polyhedron">
    <div class="rotateContainer">
        <div class="slide s0">
            <div class="slide s1">
                <div class="slide s11">
                    <div class="slide s12"></div>
                    <div class="slide s111"></div>
                </div>
            </div>
            <div class="slide s2">
                <div class="slide s21">
                    <div class="slide s22"></div>
                    <div class="slide s211"></div>
                </div>
            </div>
            <div class="slide s3">
                <div class="slide s31">
                    <div class="slide s32"></div>
                    <div class="slide s311"></div>
                </div>
            </div>
            <div class="slide s4">
                <div class="slide s41">
                    <div class="slide s42"></div>
                    <div class="slide s411"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    let polyhedron = document.querySelector(".polyhedron");
    let rotateBase = polyhedron.querySelector(".rotateContainer");
    window.addEventListener("mousemove", (e) => {
        console.log(e.pageX);
        console.log(e.pageY);
        let k = 300;
        rotateBase.style.transform = `rotateX(${k * e.pageY / 1080}deg) rotateZ(${-k * e.pageX / 1920}deg)`;
    });
</script>
</html>

css代码：

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.polyhedron {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 600px auto;
  perspective: 800px;
  outline: solid 1px red;
}
.polyhedron .rotateContainer {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
  transform-style: preserve-3d;
  transform-origin: 50% 50% 120.7px;
  outline: solid 1px green;
}
.polyhedron .rotateContainer .slide {
  outline: solid 1px;
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
  transform-style: preserve-3d;
  transition: all 0.2s;
}
.polyhedron .rotateContainer .slide:hover {
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 20px yellow;
  width: 120px;
  height: 120px;
  cursor: pointer;
}
.polyhedron .rotateContainer .slide:active {
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 20px orange;
  width: 80px;
  height: 80px;
}
.polyhedron .rotateContainer .s0 {
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}
.polyhedron .rotateContainer .s0 .s1 {
  right: -100%;
}
.polyhedron .rotateContainer .s0 .s1 .s11 {
  right: -100%;
}
.polyhedron .rotateContainer .s0 .s1 .s11 .s12 {
  top: -100%;
  transform-origin: bottom center;
  transform: rotateX(-45deg);
}
.polyhedron .rotateContainer .s0 .s1 .s11 .s111 {
  right: -100%;
}
.polyhedron .rotateContainer .s0 .s1,
.polyhedron .rotateContainer .s0 .s11,
.polyhedron .rotateContainer .s0 .s111 {
  transform-origin: left center;
  transform: rotateY(-45deg);
}
.polyhedron .rotateContainer .s0 .s2 {
  top: -100%;
}
.polyhedron .rotateContainer .s0 .s2 .s21 {
  top: -100%;
}
.polyhedron .rotateContainer .s0 .s2 .s21 .s22 {
  left: -100%;
  transform-origin: right center;
  transform: rotateY(45deg);
}
.polyhedron .rotateContainer .s0 .s2 .s21 .s211 {
  top: -100%;
}
.polyhedron .rotateContainer .s0 .s2,
.polyhedron .rotateContainer .s0 .s21,
.polyhedron .rotateContainer .s0 .s211 {
  transform-origin: bottom center;
  transform: rotateX(-45deg);
}
.polyhedron .rotateContainer .s0 .s3 {
  left: -100%;
}
.polyhedron .rotateContainer .s0 .s3 .s31 {
  left: -100%;
}
.polyhedron .rotateContainer .s0 .s3 .s31 .s32 {
  bottom: -100%;
  transform-origin: top center;
  transform: rotateX(45deg);
}
.polyhedron .rotateContainer .s0 .s3 .s31 .s311 {
  left: -100%;
}
.polyhedron .rotateContainer .s0 .s3,
.polyhedron .rotateContainer .s0 .s31,
.polyhedron .rotateContainer .s0 .s311 {
  transform-origin: right center;
  transform: rotateY(45deg);
}
.polyhedron .rotateContainer .s0 .s4 {
  bottom: -100%;
}
.polyhedron .rotateContainer .s0 .s4 .s41 {
  bottom: -100%;
}
.polyhedron .rotateContainer .s0 .s4 .s41 .s42 {
  right: -100%;
  transform-origin: left center;
  transform: rotateY(-45deg);
}
.polyhedron .rotateContainer .s0 .s4 .s41 .s411 {
  bottom: -100%;
}
.polyhedron .rotateContainer .s0 .s4,
.polyhedron .rotateContainer .s0 .s41,
.polyhedron .rotateContainer .s0 .s411 {
  transform-origin: top center;
  transform: rotateX(45deg);
}
/*# sourceMappingURL=polyhedron.css.map */

其实上面的css代码是less编译生成的，我写的是less代码

less代码如下：

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.polyhedron {
  @iconBoxL: 100px;
  width: @iconBoxL;
  height: @iconBoxL;

  position: relative;
  margin: 600px auto;
  perspective: 800px;
  outline: solid 1px red;

  .rotateContainer {
    @cubeL: 100px; // 正方体的边长
    @containerL: @cubeL * 2;
    width: @containerL;
    height: @containerL;
    // 与旋转中心同心对齐
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -(@containerL / 2);
    margin-top: -(@containerL / 2);

    transform-style: preserve-3d;
    transform-origin: 50% 50% (@cubeL/2)+(1.414/2*@cubeL);

    //transform: rotateX(60deg) rotateZ(30deg);
    outline: solid 1px green;

    .slide {
      outline: solid 1px;

      width: @cubeL;
      height: @cubeL;
      position: absolute;
      //background: transparent;
      background-color: rgba(0, 0, 0, 0.2);
      transform-style: preserve-3d;
      transition: all 0.2s;

      &:hover {
        background-color: rgba(0, 0, 0, 0.6);
        box-shadow: 0 0 20px yellow;
        width: @cubeL+20;
        height: @cubeL+20;
        cursor: pointer;
      }

      &:active {
        background-color: rgba(0, 0, 0, 0.6);
        box-shadow: 0 0 20px orange;
        width: @cubeL - 20;
        height: @cubeL - 20;
      }
    }

    .s0 {
      // 和基础旋转底面重中心对齐
      left: 50%;
      top: 50%;
      margin-left: -(@cubeL / 2);
      margin-top: -(@cubeL / 2);

      .s1 {
        right: -100%;

        .s11 {
          right: -100%;

          .s12 {
            top: -100%;
            transform-origin: bottom center;
            transform: rotateX(-45deg);
          }

          .s111 {
            right: -100%;
          }
        }
      }

      .s1, .s11, .s111 {
        transform-origin: left center;
        transform: rotateY(-45deg);
      }

      .s2 {
        top: -100%;

        .s21 {
          top: -100%;

          .s22 {
            left: -100%;
            transform-origin: right center;
            transform: rotateY(45deg);
          }

          .s211 {
            top: -100%;
          }
        }
      }

      .s2, .s21, .s211 {
        transform-origin: bottom center;
        transform: rotateX(-45deg);
      }

      .s3 {
        left: -100%;

        .s31 {
          left: -100%;

          .s32 {
            bottom: -100%;
            transform-origin: top center;
            transform: rotateX(45deg);
          }

          .s311 {
            left: -100%;
          }
        }
      }

      .s3, .s31, .s311 {
        transform-origin: right center;
        transform: rotateY(45deg);
      }

      .s4 {
        bottom: -100%;

        .s41 {
          bottom: -100%;

          .s42 {
            right: -100%;
            transform-origin: left center;
            transform: rotateY(-45deg);
          }

          .s411 {
            bottom: -100%;
          }
        }
      }

      .s4, .s41, .s411 {
        transform-origin: top center;
        transform: rotateX(45deg);
      }

      .s12, .s22, .s34, .s42 {

      }
    }
  }
}