CSS3----2D转换模块

2D转换：transform

1、旋转 rotate(45deg) 45deg表示是旋转45度
格式：
{transform:(45deg);}

2、平移 translate(100px , 0px)
——第一个参数100px代表水平方向移动100像素，正值右移 负值左移
——第二个参数0px代表垂直方向移动0像素，正值下移 负值上移
——两个参数以逗号隔开

3、缩放 scale(1.5 , 1)
——第一个参数1.5代表水平方向放大1.5倍
——第二个参数1代表垂直方向不缩放，1为默认取值
——参数大于1时放大，小于1时会缩小，等于1大小不变
——不能为负值
——如果只有一个参数，代表水平垂直都要缩放一样的值

注意点：
1、如果需要进行多个转换，连写以空格隔开。
2、2D的转换模块会修改元素的坐标系，旋转之后再平移就不是水平平移了。

/* 综合的：旋转 平移 缩放

         * 1、先旋转45度
         * 2、再移动100px -30px  旋转会更改元素的坐标系
         * 3、最后整体放大1.5
         * */

ul li:nth-child(5) { transform: rotate(45deg) translate(100px,-30px) scale(1.5);}

2D转换模块-形变中心点
1、默认情况下，所有的元素的旋转都 是以自己的中心点作为参考点进行旋转。
2、可以通过形变中心属性(transform-origin: ;)来修改它的参考点
格式：
transform-origin: 200px 200px;