fix

blog/front-end-combat/demo/transform-2.html

+<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

blog/front-end-combat/demo/transform-rotate-2.html

+<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

blog/front-end-combat/demo/transform-rotate.html

+<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

blog/front-end-combat/demo/transform-translate-rotate.html

+<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

blog/front-end-combat/transform.md

-# 平面转换
+# 平面转换 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')