通过CSS，实现元素反转

2019独角兽企业重金招聘Python工程师标准>>>

      今天突然看到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 元素是没效果的！

最后声明：

以上现象是经过我实测的结论，但观点是我个人臆测，一切以你自己的理解为准！

最近要重新找工作了，但怎么就没有动力去搞简历，反而越想写博客？越郁闷不爽的时候，压抑就转化为更多代码和博客了。长此以往，我一年后就可以汇集出书了！

今天早上的动弹主题是“程序猿到底算不算歧视”，程序猿就是人们对你歧视，因为本就是智力低下的物种，别人只是说出来而已！

转载于:https://my.oschina.net/u/1540190/blog/995733