From 7e6d36f1e012a445e9834a1c222fcccaf1f26cb6 Mon Sep 17 00:00:00 2001
From: pengshiyu <1940607002@qq.com>
Date: Sun, 13 Feb 2022 23:15:47 +0800
Subject: [PATCH] fix

---
 .../demo/transform-3d-nav.html                | 77 +++++++++++++++++++
 .../demo/transform-style.html                 | 37 +++++++++
 blog/front-end-combat/transform-3d.md         | 43 ++++++++++-
 3 files changed, 156 insertions(+), 1 deletion(-)
 create mode 100644 blog/front-end-combat/demo/transform-3d-nav.html
 create mode 100644 blog/front-end-combat/demo/transform-style.html

diff --git a/blog/front-end-combat/demo/transform-3d-nav.html b/blog/front-end-combat/demo/transform-3d-nav.html
new file mode 100644
index 0000000..1f6a476
--- /dev/null
+++ b/blog/front-end-combat/demo/transform-3d-nav.html
@@ -0,0 +1,77 @@
+<style>
+    /* 清除样式 */
+    ul {
+        list-style: none;
+    }
+
+    a {
+        text-decoration: none;
+        color: white;
+    }
+
+    /* 导航开始 */
+    .nav {
+        display: flex;
+        width: 300px;
+        margin: 0 auto;
+    }
+
+    .nav-item {
+        position: relative;
+
+        display: block;
+        width: 100px;
+        line-height: 50px;
+        text-align: center;
+        transform-style: preserve-3d;
+        transition: all .5s;
+
+        /* 开发时看到立体盒子 */
+        /* transform: rotateX(-20deg) rotateY(30deg); */
+    }
+
+    /* 中文 */
+    .nav-item__zh {
+        background-color: green;
+        transform: translateZ(25px);
+    }
+
+    /* 英文 */
+    .nav-item__en {
+        position: absolute;
+        top: -50%;
+        width: 100%;
+        background-color: orange;
+        transform: rotateX(90deg);
+    }
+
+    /* 旋转立方体 */
+    .nav-item:hover {
+        transform: rotateX(-90deg);
+    }
+</style>
+
+<div class="nav-wrap">
+    <ul class="nav">
+        <li><a href="#"
+               class="nav-item">
+                <div class="nav-item__zh">首页</div>
+                <div class="nav-item__en">Index</div>
+            </a>
+        </li>
+
+        <li><a href="#"
+               class="nav-item">
+                <div class="nav-item__zh">登录</div>
+                <div class="nav-item__en">Login</div>
+            </a>
+        </li>
+
+        <li><a href="#"
+               class="nav-item">
+                <div class="nav-item__zh">注册</div>
+                <div class="nav-item__en">Register</div>
+            </a>
+        </li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/blog/front-end-combat/demo/transform-style.html b/blog/front-end-combat/demo/transform-style.html
new file mode 100644
index 0000000..1177c7b
--- /dev/null
+++ b/blog/front-end-combat/demo/transform-style.html
@@ -0,0 +1,37 @@
+<style>
+    .box-wrap {
+        margin: 0 auto;
+        width: 200px;
+        height: 200px;
+        position: relative;
+        background-color: pink;
+        transform-style: preserve-3d;
+        transition: all 2s;
+    }
+
+    .box {
+        top: 0;
+        left: 0;
+        width: 200px;
+        height: 200px;
+        position: absolute;
+    }
+
+    .box-front {
+        background-color: green;
+        transform: translateZ(200px);
+    }
+
+    .box-back {
+        background-color: yellow;
+    }
+
+    .box-wrap:hover {
+        transform: rotateY(180deg);
+    }
+</style>
+
+<div class="box-wrap">
+    <div class="box box-front"></div>
+    <div class="box box-back"></div>
+</div>
\ No newline at end of file
diff --git a/blog/front-end-combat/transform-3d.md b/blog/front-end-combat/transform-3d.md
index 3313757..8462ba2 100644
--- a/blog/front-end-combat/transform-3d.md
+++ b/blog/front-end-combat/transform-3d.md
@@ -69,4 +69,45 @@ 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
+## 呈现立体图形
+
+让子级元素处于 3d 空间中
+
+```css
+transform-style: preserve-3d;
+```
+
+示例:
+
+[](demo/transform-style.html ':include :type=code')
+
+[](demo/transform-style.html ':include height=220')
+
+示例: 3D 导航
+
+[](demo/transform-3d-nav.html ':include :type=code')
+
+[](demo/transform-3d-nav.html ':include height=70')
+
+## 总结
+
+```css
+/* 位移 */
+transform: translate3d(x, y, z);
+
+transform: translateX(x);
+transform: translateY(y);
+transform: translateZ(z);
+
+/* 旋转，效果相同*/
+transform: rotate(角度);
+transform: rotateZ(角度);
+
+/* 透视距离 */
+perspective: 像素值; /* (800-1200) */
+
+/* 实现3d */
+transform-style: preserve-3d;
+```
+
+https://www.bilibili.com/video/BV1xq4y1q7jZ?p=39&spm_id_from=pageDriver
-- 
GitLab