大家好

今天要作文字的變化
除了水平、垂直、旋轉移動之外
CSS還可以作出顛倒的字、圖

.reflect{
  -webkit-box-reflect:below 10px ;  
}

除了文字、圖像生成在下方的顛倒還可以換成是生成在上方或左右
以及可以用漸層生成背景和遮罩選擇性遮掉

/* Direction values */
-webkit-box-reflect: above; /* 生成在文字上方 */
-webkit-box-reflect: below; /* 生成在文字下方 */
-webkit-box-reflect: left; /* 生成在文字左方 */
-webkit-box-reflect: right; /* 生成在文字右方 */

/* Offset value */
-webkit-box-reflect: below 10px; /* 與文字之間的距離 */

/* Mask value */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
 /* 用漸層生成背景 */
-webkit-box-reflect: below 10px url(圖像); /* 使用遮罩 */

參考來源：
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect

接下來要把文字彎曲作出弧形
或是作成像是繞圓一樣時
就需要使用到 jQuery

$(document).ready(function() {
  $(".line-2").arctext({radius: 700});
});

radius 的數值愈小弧度愈大

$(document).ready(function() {
  $(".line-2").arctext({radius: 100});
});

參考來源：
https://codepen.io/zambo/pen/jKEDp

--- 明日待續。