ztext简单的介绍

1、ztext是一个把元素3d化的插件。（现在包括svg、img、font）

2、ztext其实文档很完善而且即插即用。

https://bennettfeely.com/ztext/

3、简单介绍一下怎么使用

（1）css

        h1 {
          color: #90a4ae;
          font: bold 5em "Georgia", serif;
        }
        .z-text {
          /* Tip: Apply CSS transforms here */
          /* rotateX() == up/down */
          /* rotateY() == left/right */
          transform: rotateX(15deg) rotateY(30deg);
        }
        .z-layer:not(:first-child) {
          color: #455a64;
        }

（2）html

<h1><span 
        data-z　　// 表示使用ztext
        data-z-fade="false"　　// 默认false，是否也颜色褪色
        data-z-perspective="500px" 　　// 默认500px，人的视角到物体的距离，相当于css的perspective属性   
　　　　　data-z-layers="2" 　　// 默认10，3d阴影的数量
        data-z-depth="0.5em"　　// 默认1rem，每个3d阴影的距离
        data-z-direction="backwards"　　// 默认both（阴影与元素相互局中），backwards（阴影靠后），forwards（阴影靠前）
        data-z-event="pointer"　　// 默认为none，pointer根据鼠标移动，scroll根据滚轮移动，scrollX根据滚轮X轴移动，scrollY根据滚轮Y轴移动
        data-z-eventRotation="60deg"　　// 默认30deg，event移动的最大移动范围
        data-z-eventDirection="reverse">　　// 默认default，event根据目标反转还是正常reverse
      A
</span></h1>