一、CSS中变换的逻辑
执行逻辑：
- transition 过渡事件大约2S 2秒内跑完所有变换的内容
- 第一个box先跑scale（没有改变原点）然后跑translate（没有改变原点）最后跑rotate（默认是Z轴），三个内容同步在2秒内跑完
- 第二个box先跑scale（没有改变原点）然后跑rotate（也没有变）最后X轴的平移改变了原点发生了偏移旋转
- 通过scale实现卡片翻转
- 这个也是通过scale实现的
scale:-1 0 //实现卡片X轴翻转
scale：-1 -1 //实现上面的效果
//第二张卡片的逻辑：以原点为中心，左顶点跑到右下角，四个点同步对角移动
二、卡牌效果
- 背景图通过rotateX轴的旋转以及skewX扭曲实现
- 主角图通过scale实现
- 文字通过translateY轴偏移和opacity透明度实现
三、通常业务（训练逻辑能力）
逻辑：
- 基本样式快速做完，整理JS思路
- 1.调img的伪数组，和三个button按钮，声明一个index变量（给图片一个下标）
- 2.挂一个函数（先不动）两个button的点击事件（index++；fn（））
- 3.遍历img伪数组注册点击img事件（index=i;fn();body.bg=item.src）
- 4.第三个button搞定
- 5.搞定函数：①图片之间的距离比例②图片之间的大小比例③图片之间的透明度比例（直接先注释好再编写代码）（遍历）
四、十二生肖3D旋转
逻辑：
- 1.先让一张图转起来，通过rotate实现，设置Z轴上的原点
- 2.使用@keyframes 动画语法
- 3.使用z-index防止图片穿透
- 4.计算所有图片间隔的角度问题 360/imgs.length*1deg
- 5.使用CSS变量 ' --变量名 '
- 6.所有图片都可以通过JS遍历完成，包括CSS变量的值都可以用JS遍历来完成
五、模拟真实的三维空间感
这个很简单，留给你们来玩吧！
