CSS中transform的使用

简介：

转换是css3中的一个特征，可以实现元素的缩放，位移，变形。

作用

使元素在位置或者形状上发生一定的改变。

属性值

• scale：缩放（一般）
• translate 位移（重点）
• rotate 旋转（重点）
• skew 倾斜（了解）

缩放

格式：  transform:scale(x,y)
x:表示水平方向上的缩放倍数
y：表示垂直方向上的缩放倍数

 如果只写一个值表示等比例缩放。

【注意】 
 1.缩放只是一种视觉效果，不会对别的盒子造成影响。
 2.取值大于1表示放大，小于1表示缩小。

位移translate

格式：
transform:translate(水平位移量，垂直位移量)

 取值：水平位移量为正，向右移动，垂直方向的正方形为下。
      只写一个值，表示水平位移量。

      参数为百分比的话，是相对于自身的宽高。
      位移只是一种视觉效果，不会对别的盒子造成影响

旋转：rotate

格式：transform：rotate（角度（deg））
 单位：deg，正值：顺时针，负值：逆时针。

倾斜：skew

格式：
 transform:skew(水平倾斜角度，垂直倾斜角度)
  单位：deg  正值：顺指针 负值：逆时针
  两个角度相交，不要大于等于90deg.

【注意点】
1.转换操作不会影响到其他元素
2.只能添加给块元素，不能添加给行内元素。
3.同时添加多个变形操作，先执行前面的，再执行后面的。
4.多个变形操作必须写在一个transform属性后面，书写多次transform属性时，
后面的会层叠掉前面的。

书写多个2D转换事项
1、transform 可以书写多个转换，中间用空格隔开。
2、书写顺序的不同，可能会出现不同的结果。
3、如果旋转和位移一起书写，旋转在前，位移在后表示先旋转，再按照旋转后的方向进行位移。
4、 如果位移在前， 旋转在后，表示先位移再按照原点进行旋转。