經過CSS，實現元素反轉

      今天忽然看到ES6還有Reflect 概念，我怎麼之前沒注意過，趕快去CANIUSE上查一下吧，卻意外看到CSS Reflections,居然能夠有這樣的屬性！

      一般咱們反轉一個元素，能夠用transform的roate，讓它旋轉。這個很好理解，可是它旋轉後，原位置的元素就看不見了，它發生了視覺位移（實際佔位不變）。另外它只是旋轉，並不是「鏡像」的效果！

      那麼CSS Reflections有什麼效果，簡單說就是「照鏡子」！在原來元素保留不變的狀況下，再產生一個「鏡像」元素，效果以下：

CSS語法及用法 

-webkit-box-reflect: <direction> <offset> <mask-box-image>

<direction> 方向 爲  上下左右：above, below, left or right.
<offset> 偏移值 爲長度或百分比 ，指定鏡像離元素盒子反轉時邊緣的距離，默認爲0
<mask-box-image> 一個覆蓋鏡像的遮罩圖片元素，默認爲無遮罩. 

遮罩層能夠這樣寫，相似於灰度圖,：

 -webkit-gradient(linear, left top, left bottom, from(grey), color-stop(0.5, transparent), to(white)),

我試着用url("一個圖片地址") 的辦法，放入一個漸變的、透明的png圖片，是沒有遮罩效果的。

 

此鏡像會隨着元素變化而變化 ，它甚至能夠加在<video>標籤上，什麼效果能夠想像一下！

它實際會生成一個新的渲染堆棧上下文，請類比：opacity, masks and transforms，

瀏覽器支持以及替代方法：

目前僅chrome，safiar 瀏覽器支持這個特性！詳見：http://caniuse.com/#search=Reflect

firefox瀏覽器有   background: -moz-element(#myBg) no-repeat; 的方法代替，但它實際是以其它元素的影子來作背景圖顯示的，和鏡像效果還不太同樣，也不能反轉一下！

通用的scale代替方法是：transform: scaleX(-1);或transform: scaleY(-1);實現橫向或縱向的鏡像！

通常咱們用scale控制縮放比例，transform: scale(1.5)配合transition: transform 1s; 來使用，酷酷的感受有沒有！

縮放效果：

那把scale改成負值爲何就反轉了呢？

以scaleY爲例：它對新Y值的斷定時，計算公式多是： newY=oldY*係數，當係數爲負時，就至關於把全部點倒了過來。原來被scale的名字所矇蔽，一直覺得只能用來縮放，看來起名字是很重要的事（也多是我英語差的鍋）！

橫向鏡像效果：

注意：用scale時，相應的節點元素必須是塊元素，有本身「盒模型」才行，display:inline 元素是沒效果的！

最後聲明：

以上現象是通過我實測的結論，但觀點是我我的臆測，一切以你本身的理解爲準！

最近要從新找工做了，但怎麼就沒有動力去搞簡歷，反而越想寫博客？越鬱悶不爽的時候，壓抑就轉化爲更多代碼和博客了。久而久之，我一年後就能夠聚集出書了！

今天早上的動彈主題是「程序猿到底算不算歧視」，程序猿就是人們對你歧視，由於本就是智力低下的物種，別人只是說出來而已！