【Animation】照片墙3D动画

一、效果图

Demo线上链接

二、实现过程

设计思路：每个元素独立互不影响，且沿着y轴自身旋转，他们旋转初始角度不同（平分360度），然后给他们设置一定z轴距离（可以理解为半径）

需要3级元素（2级也可以）

<div class="zoetrope-wrapper">
      <div class="zoetrope">
        //需要旋转个体对数量
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

1级元素关键样式

prespective：//设置元素被查看位置的视图，以像素为单位
prespective：800px ; // 可以理解为Z轴
perspective-origin: 50% -50%;  //perspective-origin: x-axis y-axis; X轴和Y轴
注: x,y轴正方向为0% ，负方向为100% ，顺时针递增 0%->50%->100%->-50%->0%。