cube，HTML代码在线实时编辑、实时预览

index.html

            
                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

            
            <!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>
  <style>
   
  </style>
<body>
  <div class="cube-container">
    <div class="cube">
      <div class="cube-face front">前</div>
      <div class="cube-face back">后</div>
      <div class="cube-face left">左</div>
      <div class="cube-face right">右</div>
      <div class="cube-face top">上</div>
      <div class="cube-face bottom">下</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
68
69
70
71
72

            
            body {
  background-color: #fefefe;
}

 /* 容器：定义透视 + 3D 空间 */
    .cube-container {
      width: 300px;
      height: 300px;
      margin: 100px auto;
      perspective: 1000px; /* 观察者距离 */
    }

    /* 立方体容器：负责整体旋转 */
    .cube {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d; /* 子元素（面）共享 3D 空间 */
      /* animation: rotate 10s linear; */ /* 自动旋转动画 animation: rotate 10s linear infinite; /* 自动旋转动画 */
    }

    /* 立方体的 6 个面（基础样式） */
    .cube-face {
      
      position: absolute;
      width: 300px;
      height: 300px;
      border: 2px solid #fff;
      color: white;
      font-size: 40px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.8;
     /*  backface-visibility: hidden; */
    }

    /* 每个面的位置和旋转（关键） */
    .front {
      background: #ff6b6b;
      transform: translateZ(150px); /* 前面：向 Z 轴正方向移动（靠近观察者） */
      &:hover{
        background:#000;
      }
    }
    .back {
      background: #48dbfb;
      transform: translateZ(-150px) rotateY(180deg); /* 后面：远离观察者 + 旋转 180°（文字正向） */
    }
    .left {
      background: #1dd1a1;
      transform: translateX(-150px) rotateY(-90deg); /* 左面：向左移动 + 沿 Y 轴旋转 -90° */
    }
    .right {
      background: #feca57;
      transform: translateX(150px) rotateY(90deg); /* 右面：向右移动 + 沿 Y 轴旋转 90° */
    }
    .top {
      background: #5f27cd;
      transform: translateY(-150px) rotateX(90deg); /* 顶面：向上移动 + 沿 X 轴旋转 90° */
    }
    .bottom {
      background: #ff9ff3;
      transform: translateY(150px) rotateX(-90deg); /* 底面：向下移动 + 沿 X 轴旋转 -90° */
    }

    /* 旋转动画 */
    @keyframes rotate {
      0% { transform: rotateX(0) rotateY(0); }
      100% { transform: rotateX(360deg) rotateY(360deg); }
    }

编辑器加载中

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('.cube');
      // 滚动时沿 X 轴和 Y 轴轻微旋转，不同 Z 轴层级的元素移动幅度不同
      container.style.transform = `rotateX(${event.x * 0.5}deg) rotateY(${event.y * 0.5}deg)`;
    });

编辑器加载中