preverse-3d

舞台层

  • 景深层 perspective: 1600px;
  • 形变中心点perspective-origin: 0px 0px;
  • 形变中心点transform-origin: center center;

3d中心层

就是围绕运动的层
下面用几个例子来介绍3d动画

例1正方体

代码




魔方





1

2

3

4

5

6

7

8

9

10

11

12





代码运行图

preverse-3d_第1张图片
95F3F253-5A5E-467D-8F3D-25F893B95F41.png

例2 圈图

代码

























运行结果:

preverse-3d_第2张图片
EF3E7C93-A52A-4FCC-A075-4A18EDDD7ED4.png

例3 旋转链

代码如下:




旋转多圈





























便
















运行结果:

preverse-3d_第3张图片
AFA823FB-566D-4175-93CA-24CC2EB5F4FC.png

通过这些例子估计也弄懂了3d效果了,由于是动画,现又不支持动画截图,如果想看动画效果的话,自己复制代码可以看到。有关3d效果就到这里了。

你可能感兴趣的:(preverse-3d)