兼容：IE7 8 9 10 chrome firefox
demo 地址

之所以说这是 CSS 的障眼法，是因为这种效果并不是使用 CSS 原生的属性进行实现的，并不仅仅是使用一张图片，然后通过特定属性使其翻转，因为我们知道 CSS 并不提供另图片翻转的接口。要实现这种效果，我们需要的是通过图片和外层 div 的 border 的配合，使图片看起来翻转了一定角度。

细心的读者可能会发现，我在选择图片的时候，已经有所讲究，看看上面这幅图片，它具有两个特点：

1. 完全对称。

2. 图形周围的空白（黑色部分）较多。

如果不是满足上述两个特点的图片，翻转效果看起来也会没那么好，要知道原因，首先就要清楚这种翻转效果的实现原理了。

以从右到左的翻转为例，使图片翻转的实现步骤：

1. 首先添加一张你需要实现翻转效果的图片，图片绝对定位。

2. 然后我们需要的是一个 div，div 高度和图片高度相等。该 div 除了右边框外，其他边框为和背景色一样且 borderWidth 为 0，右边框则为透明且 borderWidth 和图片宽相等，定位与图片一致，zIndex 比图片大。经过这两步后，我们就可以把一个透明正方形（实质上为 div 的右边框）覆盖在图片上面。

3. 之后我们需要的就是使右边框和图片的尺寸和大小动态改变，实现翻转效果。我们开始同时逐渐减少右边框和图片的宽度，并且同时逐渐增大上下边框的宽度和图片的高度，并且调整图片和 div 的定位，使它们始终保持在原位置，就可以实现图片的翻转效果。简单地说，实现视觉上翻转效果的实际上是 div 的右边框，但是我们通过把右边框设置为透明从而露出下面的图片，看上去就是图片在翻转。

之所以我之前说的选择的图片最好要有上面那两个特点：完全对称和四周空白较多。那是因为如果图片不对称，那么图片翻转过去之后，图片的显示就会不合理（没有达到镜像的显示效果，显示位置不对），但是，我也在程序里提供了 onHalfLoop 和 onFullLoop 两个回调函数的接口，分别是翻转 90 度和 180 度后触发的回调函数。大家完全可以使用 ps 把一张图片左右（或上下）翻转，然后在 onHalfLoop 里把图片路径设置为该翻转后图片的路径，在 onFullLoop 里把路径还原，这样就可以完全克服需要使用完全对称图片这个障碍，使不对称的图片也可以实现翻转。

至于另一个特点：使用四周空白较多的图片。使用这种图片的好处是消除翻转的时候处在图片边缘的图纹被隐藏所带来的视觉破绽，具体这里说不清楚，不过大家找一张图片四周也有较多图纹的图片试试就清楚了。