04---2D转换(移动、旋转、缩小)

一、2D转换之移动translate

(1)、transform: translate(x,y)
作用: 水平和垂直移动多少距离
参数: x代表x轴 单位px ; y代表y轴 单位px
注意:如果translate只给一个参数,那么移动得是X轴，y轴不变

(2)、transform: translateX(x)
作用: 水平移动x像素
参数: x代表水平移动多少距离,单位x。

(3)、transform: translateY(y)
作用: 垂直移动y像素
参数: y代表垂直移动多少距离,单位y。

重点:

• translate得最大优点,就是不会影响其他元素得位置
• translate得百分比单位,是相当于自身元素得位置translate(50%,50%)
• translate对行内元素没有效果
  二、2D转换之旋转rotate

transform:rotate(e)
作用: 旋转多少度
参数: e代表度数,单位deg

重点:

• rotate里面跟度数,单位是deg
• 角度为正时,顺时针旋转,角度为负时，逆时针旋转。
• 默认旋转得中心点是元素得中心点

三、2D转换之中心点transform-origin

transform-origin: x y ;
参数: x代表横向坐标, y代表垂直坐标,单位是px

注意:

• x 和 y 用空格 隔开
• 中心点:默认得 x和y分别是50%和50%
• 可以是单位px,也可以是方位名词 top right bottom left centent

四、动画过度效果

动画过度效果得作用:就是给要做动画得元素添加一个时间，让肉眼可以看到动画效果
transition: all 0.5s;
s: s代表动画所用得时间,单位是秒(s)。
注意: 谁做动画给谁加,动画加在本身上。

五、2D转换之放大和缩小scale

transform:scale(x,y)
作用:可以实现放大和缩小效果
参数: x和y代表倍数,不带单位。

注意:

• x和y 大于 1，则放大, 小于1，则缩小。
• scall可以设置中心点缩放,默认是盒子得中心点.

六、2D转换综合写法

当一个元素,需要做移动，旋转，缩放动作时，需要注意三者之间得书写顺序。

注意:

• 当元素多个动作合并时,顺序为 transform: translate(x,y) rotate(deg) scale();
• 元素有多个动作时,需要用空格隔开
• 当有位移和其他属性时，需要将位移放在最前面。
• 动作顺序不同,效果也会不一样