(二) css3之2D转换

1. 位移 translate

transform: translate(x, y)
如果只往一个方向移动, 则另一个要设置为0
也可以单独设置 translateX   /   translateY

@注意:

• 不影响其他元素
• 百分比单位是相对于自身的大小的百分比
• 对行内元素没有效果

使用: 定位的盒子可以搭配 translate 进行水平/ 垂直居中

2. 旋转 rotate

transform: rotate(度数deg)

@注意:

• 默认以元素的中心点旋转
• 度数为正时顺时针, 负数为逆时针

旋转中心

transform-origin: x y;       // x y 也可以是方位名词

案例

代码见 同级目录下 02_2D_旋转案例.html

3. 缩放 scale

transfor: scale(x,y)     // x,y  是放大倍数, 不用跟单位
transfor: scale(数值)			// 只写 一个数字时, 相当于宽高都缩放改倍数

@注意:

• transform: scale(1,1) : 相当于不放大
• 不影响其他盒子
• 可以设置转换中心点缩放, 默认一中心缩放

案例

代码见 同级目录下 02_2D_缩放案例.html

4. 综合写法

transform: translate() rotate() scale() ...

@注意:

• 其顺序会影响转换的效果 (先旋转会改变坐标轴方向)
• 当综合写的时候, 把 位移 放到第一个参数