纯CSS实现3D折纸效果

今天继续来看一个纯CSS实现的3D折纸效果，效果如下图。基于上一个效果《纯CSS实现图像3D悬停效果》而开发的，没有看过的童鞋欢迎移步。

本效果原理如下图所示，分别用.img，.img:before和.img:after三个元素装载图像的50%，30%和20%三个部分，三个部分设置一样的背景图像，下面两个background-position属性实现背景偏移。然后分别对30%和20%两个元素实现旋转的动画，设置相同的变换效果，不同的变换延迟时间实现依次变换。注意打开、关闭两个状态的延迟设置不同。

好的，来看效果实现过程，html依然是非常简单。

<div class="container">
  <div class="img" data-text="Hello Girl"></div>
</div>

CSS稍微复杂点