纯CSS3实现可感知方向的卡片翻转动画

本文作者html5tricks,转载请注明出处

今天我们要给大家分享一个看似简单但却非常有趣的纯CSS3动画特效,当我们将鼠标滑过一个个卡片时,卡片可以进行翻转,这个应该很容易,而且也很常见,你一定会说,这种翻转动画随便用CSS3特性就可以实现了。但是这款CSS3卡片翻转动画有一个独有的特点,就是它可以感知翻转的方向,也就是说它可以根据用户鼠标滑过的方向来决定翻转的角度,比如鼠标从上往下滑过,那卡片就垂直翻转,如果鼠标从左往右滑过,那卡片就水平翻转。你可以去研究一下它的CSS源码,对你学习CSS3会有很大的帮助。

pure-css-direction-aware-tile

在线演示源码下载

热门推荐