CSS3D之实现动态字

思路：用::befor伪元素生成用于3D翻转的字体

实现起来挺简单的：

1. 新建5个div，每个div分别对应5个字体
2. 用::befor生成用于翻转的字体，并用absolute，以及z-index控制生成字体的位置
3. 当元素被:hover时，就进行3D翻转

实现起来挺简单的，下面直接上源码：

    

        
前
        
端
        
小
        
学
        
生
    

    
    

上面也许会有陌生的属性：

• 自定义数属性 data-descr
• content:attr()

上面这两个属性呢，是可以和::before和::afterwwe伪元素搭配使用的，效果极佳

这是上面两属性详细的文档链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after

 

灵感来自于这个博客：https://blog.csdn.net/iamcgt/article/details/72058711，但我的实现方式和他不同