2D转换模块

• 正常的
• 旋转的
• 平移的
• 缩放的
• 综合的
  注意：旋转之后物体的坐标系就发生了变化，在移动是按照变化之后的坐标系移动
  
  

形变中心点

• 默认情况下所有的元素都是以自己的中心点作为参考进行旋转的；
• 我么可以通过形变中心点改变；
• transform-origin: 0px 0px;
• 注意： 其取值有三中形式 像素点、百分比、特殊关键字（center）

旋转轴向

• 默认情况下都是按照z轴旋转；
• transform: rotateY(45deg); 比如绕着y轴转
• 但是绕着x和y旋转的时候，记得加一个属性perspective: 500px;

此属性称为透视，即近大远小；
注意，此属性一定要设置给父辈元素（爸爸或者爷爷）；

---

案例分析

静态下

鼠标悬停时

代码如下：