书页一样可翻折的立体文字 CSS

1.动画——翻折的字母

本期我们要实现一个翻折字母的效果，看上去好像是纸板上剪纸剪出的字母形状，鼠标悬浮时可以翻转，翻转的部分具有投影，纸板被剪掉而镂空部分，露出不一样的底色，看上去更加真实！

2.分析需求——庖丁解牛

a.字母需要放在独立内联标签中

翻折的是字母，而不是整段文本，所以需要将目标文本一个字母一个字母地放在单独的标签中，方便进行操作。另外因为透视中心的问题，内敛标签也是首选

b.镂空部分

镂空部分通过文本字母自身样式来实现

c.翻折部分

翻折的字母和文本字母要一致，为了不增加额外的标签，我们可以使用文本的伪元素 before，然后使用transfom样式实现

d.投影部分

投影的字母和文本字母要一致，同样可以使用after实现

e.在标签中添加指定类，即可使文本的每个字母实现翻折剪纸的效果

使用js分割文本，然后使用独立内联标签包裹，指定类和属性即可

。。。

原代码和详细教程请下载附件:

链接：https://pan.baidu.com/s/1JIHMQaUTrgtPu9XWgQT6UQ 
提取码：xrzh