diff --git "a/\345\210\230\347\201\277/20241025-\350\277\207\346\270\241\343\200\2012D&3D\350\275\254\346\215\242.md" "b/\345\210\230\347\201\277/20241025-\350\277\207\346\270\241\343\200\2012D&3D\350\275\254\346\215\242.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c66ea03960abeda7bc3ae854d58eae6ae8d49bb7
--- /dev/null
+++ "b/\345\210\230\347\201\277/20241025-\350\277\207\346\270\241\343\200\2012D&3D\350\275\254\346\215\242.md"
@@ -0,0 +1,366 @@
+## CSS3选择器
+
+### 结构伪类选择器:
+1. 格式：（**第一部分**）
+ - `E:first-child`：匹配父元素的第一个子元素E
+ - `E:last-child`：匹配父元素的最后一个子元素E
+ - `E:nth-child(n)`：匹配父元素的第一个子元素E，n从1开始算起
+ - `E:nth-child(odd)`：匹配奇数
+ - `E:nth-child(even)`：匹配偶数
+ - `E:nth-last-child(n)`：匹配父元素的倒数第n个子元素E
+
+2. 格式：（第二部分）
+ - `E:first-of-type`：匹配同类型中的第一个兄弟元素E
+ - `E:last-of-type`:匹配同类型中的最后一个同级兄弟元素E。
+ - `E:nth-of-type(n)`：匹配同类型中的第n个同级兄弟元素E。
+ - `E:nth-last-of-type(n)`：匹配同类型中的倒数第n个同级兄弟元素E。
+
+3. 格式：（第三部分）
+ - `E:empty`：匹配没有任何子节点（包括空格等text节点）的元素E。
+ - `E:target`：匹配相关URL指向的E元素。要**配合锚点**使用。
+
+### 伪元素选择器::
+1. 格式：（第一部分）
+ - `E::before`：设置在元素E**前面**的内容，配合**content属性**一起使用。
+ - `E::after`：设置在元素E**后面**的内容，配合content属性一起使用。
+ ```css
+ span::before{
+ content:"好好学习";
+ color:red;
+ }
+ ```
+
+2. 格式：（第二部分）
+ - `E::first-letter`：设置元素 E 里面的**第一个字符**的样式。
+ - `E::first-line`：设置元素 E 里面的**第一行**的样式。
+ - `E::selection`：设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
+
+
+## CSS3的属性
+
+### 文本
+1. text-shadow：设置文本**阴影**
+
+ text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开
+
+ 语法：
+ ```css
+ text-shadow: 水平位移 垂直位移 模糊程度 阴影颜色;
+ ```
+2. 设置文字凹凸效果
+ ```css
+ .tu {
+ text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
+ /* 左上角放白色的阴影，右下角放黑色的阴影，就达到了凸上来的效果。 */
+ }
+ .ao {
+ text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
+ /* 左上角放黑色的阴影，右下角放白色的阴影，就达到了凹下去的效果。 */
+ }
+ ```
+ ```html
+ 生命壹号
+ 生命壹号
+ ```
+
+
+### box-sizing属性
+指定盒子宽度和高度的计算方式。它的属性值可以是：`content-box`、`border-box`
+
+**外加模式**（css的默认方式）：box-sizing: content-box;
+- 盒子的实际宽度 = 设置的 width + padding + border
+
+**内减模式**：box-sizing: border-box;
+- 盒子的实际宽度 = 设置的 width
+
+
+### 边框
+1. border-radius：边框圆角
+
+圆有**水平半径**和**垂直半径**：如果二者相等，就是圆；如果二者不等， 就是椭圆。
+
+- 单个属性的写法：border-top-left-radius: 水平半径 垂直半径;
+- 复合写法：border-radius: 水平半径/垂直半径;
+
+2. box-shadow：边框阴影
+```css
+box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色 (inset);
+```
+- 水平偏移：正值向右 负值向左。
+- 垂直偏移：正值向下 负值向上。
+- 模糊程度：不能为负值。
+- 最后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影
+
+
+### 过渡 `transition`
+实现元素**不同状态间的平滑过渡**（补间动画）
+- 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
+- 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
+
+transition属性：
+1) `transition-property: all;`：如果希望所有的属性都发生过渡，就使用all。
+2) `transition-duration: 1s;`：过渡的持续时间。
+3) `transition-timing-function: linear;`：运动曲线。属性值可以是：
+ - `linear` 线性
+ - `ease` 减速
+ - `ease-in` 加速
+ - `ease-out` 减速
+ - `ease-in-out` 先加速后减速
+4) `transition-delay: 1s;`：过渡延迟。多长时间后再执行这个过渡动画。
+
+可以写成综合属性：
+```css
+transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+```
+
+### 2D转换 transform
+**转换**是 CSS3 中具有颠覆性的一个特征，可以实现元素的**位移、旋转、变形、缩放**，甚至支持矩阵方式。
+
+2D转换包括：缩放、移动、旋转。
+
+#### 缩放 `scale`
+ 格式：
+ ```css
+ transform: scale(x, y);
+ ```
+ - x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。
+ - 如果只写一个值就是等比例缩放。
+ - 取值：大于1表示放大，小于1表示缩小。**不能为百分比**。
+
+#### 位移 translate
+ 格式：
+ ```css
+ transform: translate(水平位移, 垂直位移);
+ ```
+ - 参数为**百分比**，相对于**自身**移动。
+ - 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
+
+ 使用位移让盒子居中：
+ ```css
+ div {
+ width: 600px;
+ height: 60px;
+ background-color: red;
+ position: absolute; /* 绝对定位的盒子 */
+ left: 50%; /* 首先，让左边线居中 */
+ top: 0;
+ transform: translate(-50%); /* 然后，利用translate，往左走自己宽度的一半*/
+ }
+ ```
+
+#### 旋转 rotate
+ 格式：
+ ```css
+ transform: rotate(角度);
+ /* 正值 顺时针；负值：逆时针。 */
+ ```
+ 设置旋转之后，同时还要给盒子设置 transition 过渡。如果没有过渡的代码，旋转会直接一步到位，没有旋转的过程
+
+
+### 3D转换 transform
+#### 旋转：rotateX、rotateY、rotateZ
+ 浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。
+ 格式：
+ ```css
+ transform: rotateX(360deg); /* 绕 X 轴旋转360度 */
+ transform: rotateY(360deg); /* 绕 Y 轴旋转360度 */
+ transform: rotateZ(360deg); /* 绕 Z 轴旋转360度 */
+ ```
+
+#### 移动：translateX、translateY、translateZ
+ 格式：
+ ```css
+ transform: translateX(100px); /* 沿着 X 轴移动 */
+ transform: translateY(360px); /* 沿着 Y 轴移动 */
+ transform: translateZ(360px); /* 沿着 Z 轴移动 */
+ ```
+
+
+# 作业(过渡、2D转换、3D转换)
+## 第一题
+### 效果图
+
+### 代码
+```css
+div{
+ width: 230px;
+ height: 300px;
+ margin-top: 30px;
+ float: left;
+
+ position: relative;
+ overflow: hidden;
+ transition: all 0.5s;
+ /* text-align: center; */
+}
+div:hover{
+ box-shadow: -1px -1px 15px -5px black;
+ top: -1px;
+}
+img{
+ margin-top: 15px;
+}
+span{
+ width: 100%;
+ height: 60px;
+ background-color: orangered;
+ position: absolute;
+ bottom: -60px;
+ transition: all .5s;
+}
+div:hover span{
+ bottom: 0px;
+}
+```
+```html
+
+
+
+
+
+
+
+
+