今天继续来看一个纯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稍微复杂点