fix

blog/front-end-combat/demo/transform-3d-nav.html

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

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

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

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