From 65d9c6e19b67d5ae9cbd6593d103ec7023bd6f46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=96=B9=E5=AE=87=E8=88=AA?=
 <14093708+fang-----yuhang@user.noreply.gitee.com>
Date: Mon, 28 Oct 2024 18:30:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...47\224\273\357\274\214Flex\357\274\211.md" | 210 ++++++++++++++++++
 1 file changed, 210 insertions(+)
 create mode 100644 "\346\226\271\345\256\207\350\210\252/20241028\347\254\224\350\256\260\357\274\210\345\212\250\347\224\273\357\274\214Flex\357\274\211.md"

diff --git "a/\346\226\271\345\256\207\350\210\252/20241028\347\254\224\350\256\260\357\274\210\345\212\250\347\224\273\357\274\214Flex\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20241028\347\254\224\350\256\260\357\274\210\345\212\250\347\224\273\357\274\214Flex\357\274\211.md"
new file mode 100644
index 0000000..820004f
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20241028\347\254\224\350\256\260\357\274\210\345\212\250\347\224\273\357\274\214Flex\357\274\211.md"
@@ -0,0 +1,210 @@
+## 3D 转换
+
+### 1、旋转：rotateX、rotateY、rotateZ
+
+**旋转的方向：（左手法则）**
+
+左手握住旋转轴，竖起拇指指向旋转轴的**正方向**，正向就是**其余手指卷曲的方向**。
+
+所有的3d旋转，对着正方向去看，都是顺时针旋转。
+
+**格式：**
+
+```javascript
+	transform: rotateX(360deg);    绕 X 轴旋转360度
+
+	transform: rotateY(360deg);    绕 Y 轴旋转360度
+
+	transform: rotateZ(360deg);    绕 Z 轴旋转360度
+
+```
+
+### 2、移动：translateX、translateY、translateZ
+
+**格式：**
+
+```javascript
+	transform: translateX(100px);    沿着 X 轴移动
+
+	transform: translateY(360px);    沿着 Y 轴移动
+
+	transform: translateZ(360px);    沿着 Z 轴移动
+
+```
+
+### 3、透视：perspective
+
+电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
+
+透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出 3d 效果，并不是正真的3d。
+
+格式有两种写法：
+
+- 作为一个属性，设置给父元素，作用于所有3D转换的子元素
+
+- 作为 transform 属性的一个值，做用于元素自身。
+
+格式举例：
+
+```css
+perspective: 500px;
+```
+
+### 4、3D呈现（transform-style）
+
+3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的**父元素**设置`transform-style: preserve-3d`来使其变成一个真正的3D图形。属性值可以如下：
+
+```css
+	transform-style: preserve-3d;     /* 让 子盒子 位于三维空间里 */
+
+	transform-style: flat;            /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */
+
+```
+
+## 动画
+
+动画是CSS3中具有颠覆性的特征，可通过设置**多个节点** 来精确控制一个或一组动画，常用来实现**复杂**的动画效果。
+
+### 1、定义动画的步骤
+
+（1）通过@keyframes定义动画；
+
+（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
+
+（3）在指定元素里，通过 `animation` 属性调用动画。
+
+
+```javascript
+    js 定义函数：
+        function fun(){ 函数体 }
+
+     调用：
+     	fun();
+```
+
+**先定义，再调用**：
+
+```javascript
+    定义动画：
+        @keyframes 动画名{
+            from{ 初始状态 }
+            to{ 结束状态 }
+        }
+
+     调用：
+      animation: 动画名称 持续时间；
+```
+animation属性的格式如下：
+
+```javascript
+            animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
+
+            animation: move1 1s  alternate linear 3;
+
+            animation: move2 4s;
+```
+### 2、动画属性
+
+animation属性的格式如下：
+
+```javascript
+            animation: 定义的动画名称  持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
+
+            animation: move1 1s  alternate linear 3;
+
+            animation: move2 4s;
+```
+
+animation 是综合属性
+
+（1）动画名称：
+
+```javascript
+	animation-name: move;
+```
+
+（2）执行一次动画的持续时间：
+
+```javascript
+	animation-duration: 4s;
+```
+
+备注：上面两个属性，是必选项，且顺序固定。
+
+（3）动画的执行次数：
+
+```javascript
+	animation-iteration-count: 1;      
+
+属性值`infinite`表示无数次。
+
+（3）动画的方向：
+
+```javascript
+	animation-direction: alternate;
+```
+
+属性值：normal 正常，alternate 反向。
+
+（4）动画延迟执行：
+
+
+```javascript
+	animation-delay: 1s;
+```
+
+（5）设置动画结束时，盒子的状态：
+
+```javascript
+	animation-fill-mode: forwards;
+```
+
+属性值： forwards：保持动画结束后的状态（默认），  backwards：动画结束后回到最初的状态。
+
+（6）运动曲线：
+
+```
+	animation-timing-function: ease-in;
+```
+
+属性值可以是：linear   ease-in-out  steps()等。
+
+注意，如果把属性值写成**` steps()`**，则表示动画**不是连续执行**，而是间断地分成几步执行。我们接下来专门讲一下属性值 `steps()`。
+
+## flex 
+
+### flex 布局的优势
+
+1、**flex 布局的子元素不会脱离文档流**，很好地遵从了“流的特性”。
+
+但你如果用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题，比较麻烦，所以也成了面试必问的经典题目。但有了 flex 布局之后，这些问题都不存在的。
+
+2、**flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范**。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。
+
+flex 唯一的缺点就在于，它不支持低版本的 IE 浏览器。
+
+### flex 的兼容性问题
+
+ flex 布局不支持 IE9 及以下的版本；IE10及以上也只是部分支持。如果你的页面不需要处理 IE浏览器的兼容性问题，则可以放心大胆地使用 flex 布局。
+
+但是，比如网易新闻、淘宝这样的大型网站，面对的是海量用户，即便使用低版本浏览器的用户比例很少，但绝对基数仍然是很庞大的。因此，这些网站为了兼容低版本的 IE 浏览器，暂时还不敢尝试使用 flex 布局。
+
+### 概念：弹性盒子、子元素
+
+在讲 flex 的知识点之前，我们事先约定两个概念：
+
+- **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。
+
+- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。
+
+### 概念：主轴和侧轴
+
+在上面的“初体验”例子中，我们发现，弹性盒子里面的子元素们，默认是从左至右排列的，这个方向，代表的就是主轴的方向。
+
+在此，我们引入主轴和侧轴的概念。
+
+- 主轴：flex容器的主轴，默认是水平方向，从左向右。
+
+- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
+
+P主轴和侧轴并不是固定不变的，可以通过 `flex-direction` 更换方向
\ No newline at end of file
-- 
Gitee