multi-layer，HTML代码在线实时编辑、实时预览

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

            
            <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <script src="./index.js"></script>
</head>

<body>
  <div class="container">
    <div class="layer">
       <div class="layer-c layer1">第一层</div>
       <div class="layer-c layer2">第二层</div>
      <div class="layer-c layer3">第三层</div>
    </div>
  </div>
</body>

</html>

编辑器加载中

style.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

            
            body {
  background-color: #fefefe;
    display:flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container{
  width:400px;
  height: 400px;
  /* background-color: #ccc; */
   perspective: 1000px; /* 观察者距离 */
  
}
.layer{
  width:100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}
.layer-c{
  width:300px;
  height: 300px;
  position: absolute;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 
    10px 10px 15px rgba(0,0,0,0.2),  /* 主阴影（模拟侧面） */
    inset 0 0 20px rgba(255,255,255,0.5);  /* 内阴影（模拟反光） */
 /*  background: linear-gradient(
    135deg,
    #3a86ff 0%,
    #4facfe 50%,
    #83c5be 100%
  ); */

}
.layer1{
  background-color: rgb(125,236,255,0.4);
  transform: rotateX(35deg) rotateY(10deg)  translateZ(160px) ;
  &:hover{
    background-color: rgb(125,236,255,0.8);
  }
}
.layer2{
  background-color: rgb(125,236,12,0.4);
  transform: rotateX(35deg) rotateY(10deg) translateZ(80px);
   &:hover{
    background-color: rgb(125,236,12,0.8);
  }
}
.layer3{
  background-color: rgb(105,26,12,0.4);
  transform: rotateX(35deg) rotateY(10deg) translateZ(10px);
    &:hover{
    background-color: rgb(105,26,12,0.8);
  }
}

编辑器加载中

index.js

            
                1
2
3
4
5
6
7

            
            window.addEventListener('mousemove', (event) => {
  //console.log(event.x,event.y)
      const scrollY = window.scrollY;
      const container = document.querySelector('.layer');
      // 滚动时沿 X 轴和 Y 轴轻微旋转，不同 Z 轴层级的元素移动幅度不同
      container.style.transform = `rotateX(${event.x * 0.5}deg) rotateY(${event.y * 0.5}deg)`;
    });

编辑器加载中