css实现的反转效果

这篇小文主要是为了实验最新的codepen是否好用,顺便记录一个常见的网页特效。

上图所展示的这种效果可以轻易使用纯css来实现,唯一的奥妙是使用了backface-visibility这个css3属性。我们所看到的网页元素在页面上是存在正反两面的,所以需要依靠这个属性来限制反面的显示效果。
具体代码如下: