add: css3-example

xiuhonglee · Jul 2, 2018 · e9d95d8 · e9d95d8
1 parent bcfc4c8
commit e9d95d8
Show file tree

Hide file tree

Showing 11 changed files with 368 additions and 6 deletions.
diff --git a/docs/.vuepress/components/CSS3/c03.vue b/docs/.vuepress/components/CSS3/c03.vue
@@ -17,6 +17,7 @@
             <p><span>border-color bottom</span><input type="radio" name="bcbottom" value="transparent" v-model="bcbottom">透明<input type="radio" checked name="bcbottom" v-model="bcbottom" value="#00f">蓝色</p>
             <p><span>border-color left</span><input type="radio" name="bcleft" value="transparent" v-model="bcleft">透明<input type="radio" checked name="bcleft" v-model="bcleft" value="#ff0">黄色</p>
             <div class="type">
+                <button @click="reset">重置</button>
                 <button @click="pthree">正三角形</button>
                 <button @click="nthree">倒三角</button>
                 <button @click="pTrapezoidal">梯形</button>
@@ -43,6 +44,18 @@ export default {
     };
   },
   methods: {
+    reset() {
+      this.width = 50;
+      this.height = 50;
+      this.borderTop = 50;
+      this.borderRight = 50;
+      this.borderBottom = 50;
+      this.borderLeft = 50;
+      this.bctop = "#f00";
+      this.bcright = "#0f0";
+      this.bcbottom = "#00f";
+      this.bcleft = "#ff0";
+    },
     pthree() {
       this.width = 0;
       this.height = 0;
@@ -120,6 +133,7 @@ export default {
   border-style: solid;
   border-width: 0;
   border-color: #f00 #0f0 #00f #ff0;
+  transition: 3s all;
 }
 .controls {
   display: flex;
@@ -147,6 +161,6 @@ export default {
   text-align: right;
 }
 .color p span {
-    width: 160px;
+  width: 160px;
 }
 </style>
diff --git a/docs/.vuepress/components/CSS3/c04.vue b/docs/.vuepress/components/CSS3/c04.vue
@@ -0,0 +1,88 @@
+<template>
+    <div class="c04">
+        <div class="camera">
+            <div class="space" :style="{transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`}">
+                <div class="box1"></div>
+                <div class="box2"></div>
+                <div class="box3"></div>
+                <div class="box4"></div>
+            </div>
+        </div>
+        <div class="ctrls">
+            <p><span>rotateX</span><input type="range" min="0" max="360" step="1" v-model="rotateX"> {{rotateX}}°</p>
+            <p><span>rotateY</span><input type="range" min="0" max="360" step="1" v-model="rotateY"> {{rotateY}}°</p>
+            <p><span>rotateZ</span><input type="range" min="0" max="360" step="1" v-model="rotateZ"> {{rotateZ}}°</p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      rotateX: 0,
+      rotateY: 0,
+      rotateZ: 0
+    };
+  }
+};
+</script>
+
+
+<style>
+.c04 {
+  display: flex;
+  flex-direction: row;
+}
+.camera {
+  width: 200px;
+  height: 200px;
+  margin-right: 20px;
+  perspective: 500px;
+  perspective-origin: center center;
+}
+
+.space {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: 1px dashed #000;
+  transform-style: preserve-3d;
+  transform-origin: center center 29px;
+}
+
+.space div {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-width: 0 50px 87px;
+  border-style: solid;
+  opacity: 0.9;
+}
+
+.box1 {
+  border-color: transparent transparent #ff0;
+  transform-origin: center bottom;
+  transform: translateX(50px) translateY(50px) rotateX(-90deg);
+}
+
+.box2 {
+  border-color: transparent transparent #f00;
+  transform-origin: center bottom;
+  transform: translateX(50px) translateY(50px) rotateX(-19.5deg);
+}
+
+.box3 {
+  border-color: transparent transparent #00f;
+  transform-origin: right bottom;
+  transform: translateX(50px) translateY(50px) rotateY(60deg) rotateX(19.5deg);
+  transition: 0.2s all;
+}
+
+.box4 {
+  border-color: transparent transparent #0f0;
+  transform-origin: left bottom;
+  transform: translateX(50px) translateY(50px) rotateY(-60deg) rotateX(19.5deg);
+}
+</style>
+
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -26,13 +26,13 @@ module.exports = {
             },
             {
                 text: 'CSS3',
-                link: '/CSS3/'
+                link: '/CSS3/c02'
             }
         ],
         sidebar: {
             '/Canvas_ch01/': ['d01', 'd02', 'd03', 'd04', 'd05', 'd06', 'd07', 'd08', 'd09', 'd10'],
             '/Canvas_ch02/': ['t01', 't02', 't03'],
-            '/CSS3/': ['c01', 'c02', 'c03', 'c04', 'c05', 'c06']
+            '/CSS3/': ['c02', 'c03', 'c04', 'c05', 'c06']
         }
     }
 }
diff --git a/docs/CSS3/c03.md b/docs/CSS3/c03.md
@@ -5,25 +5,190 @@ sidebarDepth: 2
 
 ## 1. 绘制原理
 
-正多边形的绘制原理很简单，就是通过调整边框`border`的宽高来实现，具体可以通过下面示例来加深理解。动手尝试，通过调节各个参数：
+正多边形的绘制原理很简单，就是通过调整边框`border`的宽高来实现，具体可以通过调节下面示例面板的各项参数来观察物体的形状变化。动手尝试一下，通过调节各个参数：
 
 * 如何得到一个三角形？
 * 如何得到一个梯形？
 * 如何得到一个“倒三角”
 * ……
 
-**下面正N边形的绘制都是通过这些不同朝向的三角形以及梯形拼接出来的。**
+**示例面板中默认边框及宽高为50px；后面正N边形的绘制边长均为100px，注意换算。**
 
 <CSS3-c03/>
 
 ## 2. 正三角形
 
+<img src="./img/three.jpg" width="224" height="216" style="border-radius: 3px;margin: 20px 0;">
+
+正三角形边长`100px`（后面图形边长统一为100px），夹角60度，高度约为87px。
+
+```css
+.box {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 50px 87px;
+    border-color: transparent transparent #0f0;
+}
+```
 
 ## 3. 正四边方形
 
+正四边形，设置宽高即可。也可通过`border`的方式来实现。
+
+```css
+.box {
+    width: 100px;
+    height: 0;
+    border-style: solid;
+    border-width: 100px 0 0;
+    border: #f00 transparent transparent;
+}
+
+// 或者
+.box {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 50px;
+    border: #f00;
+}
+```
 
 ## 4. 正五变形
 
+正五边形可以由三角形和梯形拼接而成。这里三角形使用`div`，梯形使用伪元素来实现。正五边形夹角为(5-2) * 180 / 5 = 108度，边长为100px，计算可得相关边长度。另外，伪元素使用绝对定位，元素的中心点(0,0)位于三角形的定点位置，所以伪元素需要往下移动59px、往左移动81px，图示如下：
+
+<img src="./img/five.jpg" width="200" height="215">
+
+```css
+.five {
+    position: relative;
+    width: 0;
+    height: 0;
+    border-width: 0 81px 59px;
+    border-style: solid;
+    border-color: transparent transparent #069;
+}
+.five::before {
+    position: absolute;
+    content: "";
+    top: 59px;
+    left: -81px;
+    width: 100px;
+    height: 0;
+    border-width: 95px 31px 0;
+    border-style: solid;
+    border-color: #069 transparent transparent;
+}
+```
 
 ## 5. 正六边形
 
+正六边形可由两个梯形拼接而成。夹角(6-2) * 180 / 6 = 120度，边长100px，计算可得相关边长度。下面使用一个`div`实现三角形，使用一个伪元素来实现梯形。图示如下：
+
+<img src="./img/six.jpg" width="200" height="206">
+
+```css
+.six {
+    position: relative;
+    width: 100px;
+    height: 0;
+    margin: 0 auto;
+    border-style: solid;
+    border-width: 0 50px 87px;
+    border-color: transparent transparent #069;
+}
+.six::after {
+    position: absolute;
+    left: -50px;
+    top: 87px;
+    content: "";
+    width: 100px;
+    height: 0;
+    border-style: solid;
+    border-width: 87px 50px 0;
+    border-color: #069 transparent transparent;
+}
+```
+
+## 6. 正七边形
+
+正七边形可有一个三角形和两个梯形拼接而成。夹角(7-2) * 180 / 7 = 128.57度，边长100px，计算可得相关边长长度。下面使用一个`div`实现三角形，两个伪元素分别实现两个梯形。图示如下：
+
+<img src="./img/seven.jpg" width="200" height="182">
+
+```css
+.seven {
+    position: absolute;
+    top: 30px;
+    left: 300px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 90px 43px;
+    border-color: transparent transparent #809;
+}
+.seven::before {
+    position: absolute;
+    left: -112px;
+    top: 43px;
+    content: "";
+    width: 180px;
+    height: 0;
+    border-style: solid;
+    border-width: 0 22px 97px;
+    border-color: transparent transparent #809;
+}
+.seven::after {
+    position: absolute;
+    left: -112px;
+    top: 140px;
+    content: "";
+    width: 100px;
+    height: 0;
+    border-style: solid;
+    border-width: 78px 62px 0;
+    border-color: #809 transparent transparent;
+}
+```
+
+## 7. 正八边形
+
+正八边形可由两个梯形和一个矩形拼接而成。正八边形夹角135度，边长100px。计算可得相关边长长度，下面也是通过一个`div`和两个伪元素实现，图示如下：
+
+<img src="./img/eight.jpg" width="200" height="220">
+
+
+```css
+.eight {
+    position: absolute;
+    left: 300px;
+    top: 300px;
+    width: 100px;
+    height: 0;
+    border-style: solid;
+    border-width: 0 71px 71px;
+    border-color: transparent transparent #098;
+}
+.eight::before {
+    content: "";
+    position: absolute;
+    left: -71px;
+    top: 71px; 
+    width: 242px;
+    height: 100px;
+    background-color: #098;
+}
+.eight::after {
+    content: "";
+    position: absolute;
+    left: -71px;
+    top: 171px; 
+    width: 100px;
+    height: 0;
+    border-style: solid;
+    border-width: 71px 71px 0;
+    border-color: #098 transparent transparent;
+}
+```