From 6a3a07de5597e185527391f4bfa6af79af290ed7 Mon Sep 17 00:00:00 2001
From: pengshiyu <1940607002@qq.com>
Date: Thu, 10 Feb 2022 23:26:06 +0800
Subject: [PATCH] fix

---
 blog/front-end-combat/demo/transform-2.html   | 43 ++++++++++++
 .../demo/transform-rotate-2.html              | 20 ++++++
 .../demo/transform-rotate.html                | 18 +++++
 .../demo/transform-translate-rotate.html      | 39 +++++++++++
 blog/front-end-combat/transform.md            | 69 +++++++++++++++++--
 5 files changed, 184 insertions(+), 5 deletions(-)
 create mode 100644 blog/front-end-combat/demo/transform-2.html
 create mode 100644 blog/front-end-combat/demo/transform-rotate-2.html
 create mode 100644 blog/front-end-combat/demo/transform-rotate.html
 create mode 100644 blog/front-end-combat/demo/transform-translate-rotate.html

diff --git a/blog/front-end-combat/demo/transform-2.html b/blog/front-end-combat/demo/transform-2.html
new file mode 100644
index 0000000..7552256
--- /dev/null
+++ b/blog/front-end-combat/demo/transform-2.html
@@ -0,0 +1,43 @@
+<style>
+    .box {
+        width: 600px;
+        height: 200px;
+        border: 1px solid #333;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .box::before,
+    .box::after {
+        /* 必须有contetn属性 */
+        content: '';
+        position: absolute;
+        width: 50%;
+        height: 100%;
+        /* 过渡 */
+        transition: all 0.5s;
+    }
+
+    .box::before {
+        left: 0;
+        top: 0;
+        background-color: skyblue;
+    }
+
+    .box::after {
+        right: 0;
+        top: 0;
+        background-color: yellow;
+    }
+
+    /* 鼠标移入 */
+    .box:hover::before {
+        transform: translateX(-100%);
+    }
+
+    .box:hover::after {
+        transform: translateX(100%);
+    }
+</style>
+
+<div class="box"></div>
\ No newline at end of file
diff --git a/blog/front-end-combat/demo/transform-rotate-2.html b/blog/front-end-combat/demo/transform-rotate-2.html
new file mode 100644
index 0000000..7e966fb
--- /dev/null
+++ b/blog/front-end-combat/demo/transform-rotate-2.html
@@ -0,0 +1,20 @@
+<style>
+    .box {
+        margin: 0 auto;
+        width: 50px;
+        height: 50px;
+        background-color: skyblue;
+        transition: all 0.5s;
+
+        /* 改变旋转中心点 */
+        transform-origin: right bottom;
+    }
+
+    .box:hover {
+        /* 顺时针旋转360度 */
+        transform: rotate(360deg);
+    }
+</style>
+
+
+<div class="box"></div>
\ No newline at end of file
diff --git a/blog/front-end-combat/demo/transform-rotate.html b/blog/front-end-combat/demo/transform-rotate.html
new file mode 100644
index 0000000..f06da0a
--- /dev/null
+++ b/blog/front-end-combat/demo/transform-rotate.html
@@ -0,0 +1,18 @@
+<style>
+    .box {
+        margin: 0 auto;
+        width: 50px;
+        height: 50px;
+        background-color: skyblue;
+        transition: all 0.5s;
+
+    }
+
+    .box:hover {
+        /* 顺时针旋转360度 */
+        transform: rotate(360deg);
+    }
+</style>
+
+
+<div class="box"></div>
\ No newline at end of file
diff --git a/blog/front-end-combat/demo/transform-translate-rotate.html b/blog/front-end-combat/demo/transform-translate-rotate.html
new file mode 100644
index 0000000..88dea3a
--- /dev/null
+++ b/blog/front-end-combat/demo/transform-translate-rotate.html
@@ -0,0 +1,39 @@
+<style>
+    .wrap {
+        width: 600px;
+        height: 200px;
+        border: 1px solid #666;
+        margin: 0 auto;
+
+    }
+
+    .box {
+        height: 200px;
+        width: 200px;
+        background-color: skyblue;
+
+        border-radius: 50%;
+       
+        position: relative;
+        overflow: hidden;
+        transition: all 3s;
+    }
+
+    .box::before {
+        position: absolute;
+
+        content: '';
+        width: 200px;
+        height: 100px;
+        background-color: yellow;
+    }
+
+    .wrap:hover .box {
+        /* 旋转会改变坐标轴向 */
+        transform: translate(400px) rotate(360deg);
+    }
+</style>
+
+<div class="wrap">
+    <div class="box"></div>
+</div>
\ No newline at end of file
diff --git a/blog/front-end-combat/transform.md b/blog/front-end-combat/transform.md
index 1b4c4c2..5c00048 100644
--- a/blog/front-end-combat/transform.md
+++ b/blog/front-end-combat/transform.md
@@ -1,4 +1,4 @@
-# 平面转换
+# 平面转换 transform
 
 使用 transform 实现位移、旋转、缩放等效果
 
@@ -10,6 +10,8 @@
    +y
 ```
 
+## 位移 translate
+
 语法
 
 ```css
@@ -35,14 +37,71 @@ transition: all 0.5s;
 [](demo/transform.html ':include height=220')
 
 技巧
-- translate 只给一个值，表示x轴方向移动距离
-- 单独设置某个方向的移动：translateX(), translateY()
-
 
+- translate 只给一个值，表示 x 轴方向移动距离
+- 单独设置某个方向的移动：translateX(), translateY()
 
 ```css
 /* 背景图从右显示 */
 background-position: right 0;
 ```
 
-https://www.bilibili.com/video/BV1xq4y1q7jZ?p=12&spm_id_from=pageDriver
\ No newline at end of file
+示例：双开门
+
+[](demo/transform-2.html ':include :type=code')
+
+[](demo/transform-2.html ':include height=220')
+
+## 旋转 rotate
+
+语法
+
+```css
+transform: rotate(角度);
+```
+
+角度单位`deg`, 正负数均可
+
+- 正数：顺时针
+- 负数：逆时针
+
+示例：
+
+[](demo/transform-rotate.html ':include :type=code')
+
+[](demo/transform-rotate.html ':include height=70')
+
+## 改变转换原点 transform-origin
+
+默认的旋转原点是盒子中心点
+
+语法
+
+```
+transform-origin 原点水平位置, 原点垂直位置;
+```
+
+取值
+
+- 方位名词 top left right bottom center
+- 像素单位数值
+- 百分比（参照盒子自身尺寸）
+
+示例：
+
+[](demo/transform-rotate-2.html ':include :type=code')
+
+[](demo/transform-rotate-2.html ':include height=120')
+
+## 多重转换
+
+```css
+/* 复合属性 先后顺序不一样，效果也不一样 */
+transform: translate() rotate();
+```
+
+示例：边走边转
+
+[](demo/transform-translate-rotate.html ':include :type=code')
+
+[](demo/transform-translate-rotate.html ':include height=240')
-- 
GitLab