(26) CSS3 2D转换transform

一、transform转换属性作用

作用：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。 属性值：多种转换方法的属性值，可以实现不同的转换效果。

二、位移 translate()

transform的属性值为 translate() 时，可以实现位移效果。

书写语法：

示例1： 

示例2：  

 三、缩放 scale()

transform 的属性值为 scale() 时，可以实现元素缩放效果。

1.书写语法：

2.示例1

给图片放大原来尺寸的1.5倍。 

示例2

给图片scale取值为1，相当于扩大1倍，任何数乘以1还是本身，所以说尺寸没有发生变化。

 示例3

当scale(0.5)时，表示图片缩小原来的0.5倍，缩小的范围可以写成0-1这个范围，超过1都是表示放大，那么这里只写了一个值，说明它的水平和垂直方向同时缩小原来尺寸的0.5倍。

示例4

当scale(0)时，那么任何数字乘以0结果都等于0，所以说0的话元素即为消失看不到，尺寸是0*0。 

示例5

当我们使用scaleX(0.5)，说明它是将x水平轴缩小0.5倍，而垂直方向不变。同样的增大尺寸也是这个道理。

四、旋转rotate()

transform 属性值设置为 rotate() 时，实现元素的旋转。

1.书写语法

rotate(数字deg) 其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有 一个属性值。 注意：元素旋转后，坐标轴也跟着发生转变。 因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异。

2.示例1

rotate()取值为正数的度数，那么元素是顺时针旋转的。相反的话取值是负数，就是逆时针进行旋转。

示例2（先位移后旋转）

多个属性值可以同时设置给 transform，使用空格分隔。

 

示例3（先旋转后位移）

五、倾斜 skew()

transform 属性值设置为 skew() 时，实现元素的倾斜。

1.书写语法

transform: skew(数字deg,数字deg); 两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0。

2.示例

 六、transform­-origin 属性

作用：设置调整元素的水平和垂直方向原点的位置。 调整元素的基准点。 属性值：包含两个，中间使用空格分隔。默认是center center 

示例1： 

 示例2：