DeepSeek天生的简朴3D货架

先上以层结构图 （8层 10列，每列3个抽屉）:

鼠标滑动结果：

以层结构 代码：

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.     <title>3D 货架</title>
7.     <link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
8.     <!--<link href="layui/css/layui.css" rel="stylesheet"> 如果本地有就引入本地的-->
9.     <style>
10.         body, html {
11.      
12.      
13.             width: 100%; /* 确保 body 宽度为 100% */
14.             height: 100%;
15.             margin: 0;
16.             display: flex;
17.             justify-content: center;
18.             align-items: center;
19.             background-color: #f0f0f0;
20.         }
21.         .shelf-container {
22.      
23.      
24.             width: 70%; /* 屏幕宽度的 70% */
25.             height: 50%;
26.             display: flex;
27.             flex-direction: column; /* 垂直排列 */
28.             justify-content: space-between; /* 每层之间均匀分布 */
29.             align-items: center;
30.             position: relative;
31.             border: 6px solid #8B4513; /* 木制颜色边框 */
32.             border-top: 10px solid #8B4513; /* 上边框加厚 */
33.             border-bottom: 10px solid #8B4513; /* 下边框加厚 */
34.             box-sizing: border-box;
35.             background: linear-gradient(to bottom, #ccb89c, #938066); /* 渐变色 */
36.             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 添加阴影 */
37.             transform-origin: center;
38.         }
39.         .column-labels {
40.      
41.      
42.             width: 100%;
43.             display: flex;</

复制代码