diff --git "a/\351\230\231\346\263\263\347\217\215/20241028(3D\350\275\254\346\215\242,\345\212\250\347\224\273).md" "b/\351\230\231\346\263\263\347\217\215/20241028(3D\350\275\254\346\215\242,\345\212\250\347\224\273).md"
new file mode 100644
index 0000000000000000000000000000000000000000..a4bc522c588b6e5295c97fc78fff0d473b4c069f
--- /dev/null
+++ "b/\351\230\231\346\263\263\347\217\215/20241028(3D\350\275\254\346\215\242,\345\212\250\347\224\273).md"
@@ -0,0 +1,310 @@
+# 3D转换
+## 旋转：rotateX、rotateY、rotateZ
+>所有的3d旋转，对着正方向去看，都是顺时针旋转
+
+**格式：**
+```javascript
+	transform: rotateX(360deg);    //绕 X 轴旋转360度
+	transform: rotateY(360deg);    //绕 Y 轴旋转360度
+	transform: rotateZ(360deg);    //绕 Z 轴旋转360度
+```
+
+
+## 移动：translateX、translateY、translateZ
+**格式：**
+```javascript
+	transform: translateX(100px);    //沿着 X 轴移动
+	transform: translateY(360px);    //沿着 Y 轴移动
+	transform: translateZ(360px);    //沿着 Z 轴移动
+```
+
+## 透视：perspective
+> perspective: 500px;
+
+## 3D呈现（transform-style）
+```
+    transform-style: preserve-3d;     /* 让 子盒子 位于三维空间里 */
+	transform-style: flat;            /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */
+```
+
+
+
+
+
+
+# 动画
+## 定义动画的步骤
+-（1）通过@keyframes定义动画；
+-（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
+-（3）在指定元素里，通过 `animation` 属性调用动画。
+
+**定义动画的时候，是先定义，再调用**
+```
+定义动画：
+        @keyframes 动画名{
+            from{ 初始状态 }
+            to{ 结束状态 }
+        }
+
+     调用：
+      animation: 动画名称 持续时间；
+```
+
+
+
+## 动画属性
+**animation属性的格式：**
+```javascript
+            animation: 定义的动画名称  持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
+
+            animation: move1 1s  alternate linear 3;
+
+            animation: move2 4s;
+```
+
+
+
+## steps()的效果
+>调用动画时写成： animation: move2 4s steps(2);
+
+
+
+
+# flex布局(重点!!!)
+## flex 布局的优势
+- flex 布局的子元素不会脱离文档流
+- flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范
+
+
+## 概念：弹性盒子、子元素
+- **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。
+- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。
+
+
+
+## 概念：主轴和侧轴
+- 主轴：flex容器的主轴，默认是水平方向，从左向右。
+- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
+
+
+**主轴和侧轴不是固定不变的，可以通过 `flex-direction` 更换方向**
+
+
+
+# 课后作业
+## 1.音乐
+![音乐效果图](./rendering/1歌.gif)
+代码
+```
+<style>
+        .container{
+            border: 2px solid pink;
+            width: 1235px;
+            height: 390px;
+            padding: 6px;
+        }
+         .d1{
+            background-image: url(./images/hover1.jpg);
+         }
+         .d2{
+            background-image: url(./images/hover2.jpg);
+         }
+         .d3{
+            background-image: url(./images/hover3.jpg);
+         }
+         .d4{
+            background-image: url(./images/hover4.jpg);
+         }
+
+        .d1,.d2,.d3,.d4{
+            width: 280px;
+            height: 370px;
+            color: white;
+            position: relative; 
+            overflow: hidden;
+            float: left;
+            background-repeat: no-repeat;
+            margin: 7px;
+            padding: 7px;
+         }
+         .text{
+            position: absolute;
+            width: 260px;
+            height: 350px;
+            margin: 4px;
+            font-size: 14px;
+            opacity: 0;
+            
+         }
+         .text .text1{
+            padding-top: 180px;
+         }
+        
+         .bgc{
+            width: 280px;
+            height: 370px;
+         }
+
+
+         .bgc:hover .text{
+            animation: mv1 2s;
+            opacity: 1;
+         }
+         @keyframes mv1{
+            from {
+                background-color: transparent;
+            }
+            to {
+                background-color: rgba(128, 128, 128, 0.5);
+            }
+         }
+
+         .bgc:hover .text1{
+            animation: mv2 1s;
+         }
+         @keyframes mv2{
+            from {
+               transform: translate(0px, -300px);
+            }
+            to {
+                transform: translate(0px,0px);
+            }
+         }
+
+         .bgc:hover .text2{
+            animation: mv3 1s;
+         }
+         @keyframes mv3{
+            from {
+               transform: translate(-100px, 0px);
+            }
+            to {
+                transform: translate(0px,0px);
+            }
+         }
+
+         .bgc:hover .text3{
+            animation: mv4 1s;
+         }
+         @keyframes mv4{
+            from {
+               transform: translate(0px, 300px);
+            }
+            to {
+                transform: translate(0px,0px);
+            }
+         }
+    </style>
+```
+
+## 2.海底世界
+![海底世界效果图](./rendering/2shark.gif)
+代码
+```
+<style>
+        body{
+            background-color: rgb(62, 130, 247);
+        }
+        .container {
+            position: relative;
+            width: 100%;
+            height: 800px; /* 调整容器高度以适应所有元素 */
+            overflow: hidden; /* 防止内容溢出 */
+        }
+        .shark{
+            background-image: url(./images/鲨鱼.png);
+            width: 509px;
+            height: 270px;
+            margin-top: 250px;
+            animation: mv1 1s steps(8) infinite;
+        }
+        .fish{
+            background-image: url(./images/灯笼鱼.png);
+            width: 174px;
+            height: 130px;
+            animation: fishs 1s steps(12) infinite;
+            transform: translate(500px,-670px);
+        }
+        .d1{
+            animation: d1 12s infinite;
+
+        }
+        .d2{
+            animation: d2 18s infinite;
+
+        }
+        @keyframes mv1{
+            from{
+                transform: translate(0px,0px);
+            }
+            to{
+                
+                background-position:left -2157px;
+            }
+        }
+
+        @keyframes fishs{
+        from{
+        }
+        to{
+            background-position: left -1505px;
+        }
+       }
+
+       @keyframes d1{
+            from{
+                transform: translate(0px,0px);
+            }
+            to{
+                transform: translateX(1280px);
+            }
+        }
+
+        @keyframes d2{
+            0%{
+                transform: translate(0px,0px)
+            }
+            25%{
+                transform: translate(0px,600px);
+            }
+            50%{
+                transform: translate(-400px,600px);
+            }
+            75%{
+                transform: translate(-200px,-100px);
+            }
+            100%{
+                transform: translate(0px,0px);
+            }
+        }
+    </style>
+```
+
+## 3.北极熊
+![北极熊效果图](./rendering/3bear.gif)
+代码
+```
+<style>
+        .container{
+            width: 1000px;
+            height: 100px;
+            background-color: rgb(24, 138, 24);
+            overflow: hidden;
+        }
+        .b{
+            background-image: url(./images/白熊.png);
+            width: 200px;
+            height: 100px;
+            animation: mv1 2s steps(8)infinite;
+        }
+        @keyframes mv1 {
+            from {
+                transform: translate(0, 0);
+            }
+
+            to {
+                background-position: -1600px 0;
+            }
+        }
+    </style>
+```
\ No newline at end of file
diff --git "a/\351\230\231\346\263\263\347\217\215/rendering/1\346\255\214.gif" "b/\351\230\231\346\263\263\347\217\215/rendering/1\346\255\214.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..017be3b8155df0cf5b89ca609850325f3678d7fc
Binary files /dev/null and "b/\351\230\231\346\263\263\347\217\215/rendering/1\346\255\214.gif" differ
diff --git "a/\351\230\231\346\263\263\347\217\215/rendering/2shark.gif" "b/\351\230\231\346\263\263\347\217\215/rendering/2shark.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..d63c2b9e216256cd973a6ed008530daebec4cceb
Binary files /dev/null and "b/\351\230\231\346\263\263\347\217\215/rendering/2shark.gif" differ
diff --git "a/\351\230\231\346\263\263\347\217\215/rendering/3bear.gif" "b/\351\230\231\346\263\263\347\217\215/rendering/3bear.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..3498cf02ff8270e6c48c08ec456214d54a41205e
Binary files /dev/null and "b/\351\230\231\346\263\263\347\217\215/rendering/3bear.gif" differ