CSS3 属性 Transform 详解

1.  可以实现 旋转（rotate），缩放（scale），倾斜（skew），移动（translate）；

2. 旋转（rotate）

    未设置旋转点， 默认旋转点是中心点 [center, center]；可以 transform-origin  设置旋转点；

     例如： transform-origin： 0 0  【左上角】

•    rotate(45deg)   正数表示顺时针， 复数表示逆时针:

  trandform: rotate(45deg);

•     rotateX:   围绕中心点 X 轴旋转: 

  transform: rotateX(45deg)

•    rotateY： 围绕中心点 Y 轴旋转：

  transform: rotateY(45deg);

•  rotateZ： 围绕中心点 Z 轴旋转: 

  transform: rotateZ(45deg);

•  rotate3d:  x，y，z 分别为各轴的坐标位置， angle 旋转度数： 

  transform3d: rotate(x, y, z, angle);

  3d坐标轴：z轴垂直电脑屏幕指向你，y轴在电脑屏幕垂直朝下，x轴在电脑屏幕水平向右

  左手定则：类似物理当中的左手定则，大拇指指向旋转方向轴正方向，四指环绕紧握，四指指向为元素旋转方向

  旋转原点：一般指向元素正中心，当然你可以设定旋转元素上设置样式transform-origin进行相应更改

      想要更详细可以参考：【转载】css3系列之transform 详解rotate - 杨耿 - 博客园

3. 缩放（scale）

     默认值是 1， 不缩放，一般看到的只有 2d 缩放效果， 当是 3d 图像的时候出现缩放效果， scaleZ 生效

• scaleX(1):  缩放 X轴比例
• scaleY(1):  缩放 Y轴比例
• scaleZ(1):  缩放 Z轴比例
• scale3d(1,1,1):  实际上是 scaleX， scaleY，scaleZ

       想要更详细可以参考：【转载】css3系列之transform 详解scale - 杨耿 - 博客园

      transform: scale(2,1)  rotate( 0deg ):  先缩放， 再旋转

      transform: rotate( 0deg ) scale(2,1):  旋转过程中一直有缩放

3. 倾斜（skew）

        X轴： 电脑屏幕垂直朝下； Y轴： 电脑屏幕水平向右

transform: skew(0, 30deg); // 元素按照水平方向顺时针旋转 30°

transform: skew(30deg, 0); // 是按照垂直方向X轴，逆时针旋转的

3. 移动（translate）

• translateX： X轴上移动的距离：

  transform：translateX(50px); // 水平方向 向右移动 50px

• translateY：Y轴上移动的距离：

  transform：translateY(50px); // 垂直方向 向下偏移 50px

• translateZ：Z轴上移动的距离：

  transform：translateZ(50px); // 

4. 书写规范：

transform: rotate | scale | skew | translate ;