From 4473287a397cb851a62439c65b03aeeb319ba967 Mon Sep 17 00:00:00 2001
From: pengshiyu <1940607002@qq.com>
Date: Sun, 13 Feb 2022 14:26:36 +0800
Subject: [PATCH] fix

---
 README.md                                     |  2 +-
 .../demo/background-image.html                | 10 +++
 .../demo/transform-3d-perspective.html        | 21 ++++++
 .../front-end-combat/demo/transform-mask.html | 69 ++++++++++++++++++
 .../demo/transform-rotate3d.html              | 48 +++++++++++++
 blog/front-end-combat/index.md                |  4 +-
 blog/front-end-combat/transform-3d.md         | 72 +++++++++++++++++++
 blog/front-end-combat/transform.md            | 16 +++++
 blog/front-end-learn/index.md                 | 14 +---
 doc/html.md                                   |  8 +++
 index.html                                    |  2 +
 11 files changed, 251 insertions(+), 15 deletions(-)
 create mode 100644 blog/front-end-combat/demo/background-image.html
 create mode 100644 blog/front-end-combat/demo/transform-3d-perspective.html
 create mode 100644 blog/front-end-combat/demo/transform-mask.html
 create mode 100644 blog/front-end-combat/demo/transform-rotate3d.html
 create mode 100644 blog/front-end-combat/transform-3d.md

diff --git a/README.md b/README.md
index cf3cc44..44417ae 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,7 @@
 本地预览
 
 ```bash
-npm i docsify -g
+npm i
 
 npm run dev
 ```
diff --git a/blog/front-end-combat/demo/background-image.html b/blog/front-end-combat/demo/background-image.html
new file mode 100644
index 0000000..469e7bc
--- /dev/null
+++ b/blog/front-end-combat/demo/background-image.html
@@ -0,0 +1,10 @@
+<style>
+    .box {
+        width: 200px;
+        height: 200px;
+        /* 逗号隔开多个值, 从透明到半透明 渐变 */
+        background-image: linear-gradient(transparent, rgba(0, 0, 0, .5));
+    }
+</style>
+
+<div class="box"></div>
\ No newline at end of file
diff --git a/blog/front-end-combat/demo/transform-3d-perspective.html b/blog/front-end-combat/demo/transform-3d-perspective.html
new file mode 100644
index 0000000..8ba6070
--- /dev/null
+++ b/blog/front-end-combat/demo/transform-3d-perspective.html
@@ -0,0 +1,21 @@
+<style>
+    .box-wrap {
+        perspective: 1000px;
+    }
+
+    .box {
+        margin: 0 auto;
+        width: 200px;
+        height: 200px;
+        background-color: skyblue;
+        transition: all .5s;
+    }
+
+    .box:hover {
+        transform: translateZ(100px);
+    }
+</style>
+
+<div class="box-wrap">
+    <div class="box"></div>
+</div>
\ No newline at end of file
diff --git a/blog/front-end-combat/demo/transform-mask.html b/blog/front-end-combat/demo/transform-mask.html
new file mode 100644
index 0000000..3daeaa8
--- /dev/null
+++ b/blog/front-end-combat/demo/transform-mask.html
@@ -0,0 +1,69 @@
+<style>
+    p {
+        margin: 0;
+        padding: 0;
+    }
+
+    .box {
+        display: block;
+        width: 200px;
+        height: 150px;
+        margin: 0 auto;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .box .cover {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: all 0.5s;
+    }
+
+    .box .title {
+        position: absolute;
+        width: 100%;
+        height: 50px;
+        padding: 10px;
+        bottom: 0;
+        left: 0;
+        color: white;
+        box-sizing: border-box;
+        z-index: 2;
+    }
+
+
+    /* 渐变背景 */
+    .box .mask {
+        position: absolute;
+        opacity: 0;
+        transition: all 0.5s;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background-image: linear-gradient(transparent,
+                rgba(0, 0, 0, .6));
+    }
+
+    .box:hover .mask {
+        opacity: 1;
+    }
+
+    .box:hover .cover {
+        transform: scale(1.2);
+    }
+</style>
+
+<a class="box"
+   href="#">
+    <img class="cover"
+         src="https://api.isoyu.com/bing_images.php"
+         alt="">
+
+    <div class="title">
+        <p>百日依山尽</p>
+    </div>
+
+    <div class="mask"></div>
+</a>
\ No newline at end of file
diff --git a/blog/front-end-combat/demo/transform-rotate3d.html b/blog/front-end-combat/demo/transform-rotate3d.html
new file mode 100644
index 0000000..63d8e8e
--- /dev/null
+++ b/blog/front-end-combat/demo/transform-rotate3d.html
@@ -0,0 +1,48 @@
+<style>
+    .box-wrap {
+        margin: 0 auto;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        width: 640px;
+        overflow: hidden;
+
+        perspective: 1000px;
+    }
+
+    .box {
+        width: 200px;
+        height: 200px;
+        /* background-color: skyblue; */
+        transition: all .5s;
+        background-image: url('https://api.isoyu.com/bing_images.php');
+    }
+
+    .box .cover {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .box-rotate-z:hover {
+        /* 以z轴为中心点旋转 */
+        transform: rotateZ(60deg);
+    }
+
+    .box-rotate-x:hover {
+        /* 以x轴为中心点旋转 */
+        transform: rotateX(60deg);
+    }
+
+    .box-rotate-y:hover {
+        /* 以y轴为中心点旋转 */
+        transform: rotateY(60deg);
+    }
+</style>
+
+<div class="box-wrap">
+    <div class="box box-rotate-z"></div>
+
+    <div class="box box-rotate-x"></div>
+
+    <div class="box box-rotate-y"></div>
+</div>
\ No newline at end of file
diff --git a/blog/front-end-combat/index.md b/blog/front-end-combat/index.md
index b29043a..fbfdbb3 100644
--- a/blog/front-end-combat/index.md
+++ b/blog/front-end-combat/index.md
@@ -6,7 +6,9 @@
 
 2. [平面转换 transform](blog/front-end-combat/transform.md)
 
-- css3 平面空间转换、渐变、动画属性
+3. [空间转换 transform](blog/front-end-combat/transform-3d.md)
+
+- css3 平面、渐变、动画属性
 - Flex 布局
 - 移动适配
 - 响应式 BootStrap 框架
diff --git a/blog/front-end-combat/transform-3d.md b/blog/front-end-combat/transform-3d.md
new file mode 100644
index 0000000..3313757
--- /dev/null
+++ b/blog/front-end-combat/transform-3d.md
@@ -0,0 +1,72 @@
+# 空间转换（3D 转换）
+
+空间内位移、旋转、缩放
+
+z 轴的正方向指向用户（屏幕外边方向）
+
+语法
+
+```css
+transform: translate3d(x, y, z);
+
+transform: translateX(x);
+transform: translateY(y);
+transform: translateZ(z);
+```
+
+取值：
+
+- 正负均可
+- 百分比
+- 像素值
+
+## 1、透视
+
+perspective 视线透视效果
+
+透视效果：近大远小，近实远虚
+
+父级添加属性
+
+```css
+/* 透视距离(视距): 人眼睛到屏幕的距离 */
+perspective: 像素值; /* (800-1200) */
+```
+
+示例：
+
+[](demo/transform-3d-perspective.html ':include :type=code')
+
+[](demo/transform-3d-perspective.html ':include height=220')
+
+## 2、空间旋转 rotate
+
+语法
+
+```css
+transform: rotateZ(角度);
+transform: rotateX(角度);
+transform: rotateY(角度);
+```
+
+示例：
+
+[](demo/transform-rotate3d.html ':include :type=code')
+
+[](demo/transform-rotate3d.html ':include height=220')
+
+## 左手法则: 判断旋转方向
+
+左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向
+
+## rotate3d（了解）
+
+自定义旋转周的位置及旋转角度
+
+```css
+rotate3d(x, y, z, 角度);
+```
+
+x, y, z 取 0-1 之间的数字
+
+https://www.bilibili.com/video/BV1xq4y1q7jZ?p=34&spm_id_from=pageDriver
\ No newline at end of file
diff --git a/blog/front-end-combat/transform.md b/blog/front-end-combat/transform.md
index ced9e4c..d6d28d8 100644
--- a/blog/front-end-combat/transform.md
+++ b/blog/front-end-combat/transform.md
@@ -132,3 +132,19 @@ transform: scale(缩放倍数);
 [](demo/transform-scale.html ':include height=270')
 
 https://www.bilibili.com/video/BV1xq4y1q7jZ?p=19&spm_id_from=pageDriver
+
+## 渐变背景 background-image
+
+示例 1：
+
+[](demo/background-image.html ':include :type=code')
+
+[](demo/background-image.html ':include height=220')
+
+示例 2：
+
+[](demo/transform-mask.html ':include :type=code')
+
+[](demo/transform-mask.html ':include height=170')
+
+
diff --git a/blog/front-end-learn/index.md b/blog/front-end-learn/index.md
index 5bf37de..9ec6acf 100644
--- a/blog/front-end-learn/index.md
+++ b/blog/front-end-learn/index.md
@@ -1,18 +1,6 @@
 # 笔记：web 前端开发入门
 
-<!-- <a href="/blog/demo/demo.html" target="_blank">demo</a> -->
-
-## 资源
-
-[2022 年前端学习路线图](https://www.bilibili.com/read/cv10431130)
-
-[黑马程序员 web 前端开发入门教程，前端零基础 html5+css3+前端项目视频教程](https://www.bilibili.com/video/BV1Kg411T7t9)
-
-[菜鸟教程-HTML 教程- (HTML5 标准)](https://www.runoob.com/html/html-tutorial.html)
-
-[https://developer.mozilla.org/zh-CN/](https://developer.mozilla.org/zh-CN/)
-
-## 内容
+视频：[黑马程序员 web 前端开发入门教程，前端零基础 html5+css3+前端项目视频教程](https://www.bilibili.com/video/BV1Kg411T7t9)
 
 1. [HTML 基本认知](blog/front-end-learn/html-basic.md)
 
diff --git a/doc/html.md b/doc/html.md
index f9f22f8..fa024a5 100644
--- a/doc/html.md
+++ b/doc/html.md
@@ -23,3 +23,11 @@
 [w3school](https://www.w3school.com.cn/)
 
 [我要自学网-WEB 前端开发视频教程](http://www.51zxw.net/list.aspx?cid=393)
+
+## 资源
+
+[2022 年前端学习路线图](https://www.bilibili.com/read/cv10431130)
+
+[菜鸟教程-HTML 教程- (HTML5 标准)](https://www.runoob.com/html/html-tutorial.html)
+
+[https://developer.mozilla.org/zh-CN/](https://developer.mozilla.org/zh-CN/)
diff --git a/index.html b/index.html
index cbd4cf4..8936ed6 100644
--- a/index.html
+++ b/index.html
@@ -41,9 +41,11 @@
         }
     </script>
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
+    
     <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-java.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/prismjs@1.26.0/components/prism-json.min.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
-- 
GitLab