过渡、旋转、缩放

过渡

含义：元素的一种状态向另外一种状态进行过渡 ，缓慢的发生改变。
属性：transition
取值：all   3s linear  5s
      all-------------所有参与过渡的属性
      linear---------动画过渡的时候类型：匀速
      3s-------------动画的执行时长
      5s------------过渡的缓慢执行

如何实现：缓慢的开始缓慢的结束呢？
要想实现缓慢的开始和缓慢的结束：需要把过渡的属性放在初始效果里面。
不是所哟的属性都参与过渡，至少目前来看display是不参与过渡的。

过渡动画的执行类型

  1）linear-------匀速
  2）ease--------缓慢开始，加速、结束前变慢
  3）ease-in-----缓慢的开始
  4）ease-out---缓慢的结束
  5）ease-in-out-低俗开始和结束
  6）steps（数值)--执行步骤
  7）贝塞尔曲线

2d平面效果

2d的平面效果---------x和y轴上面的效果
主要学习的是：2d上面的平移、旋转、缩放、倾斜

平移函数

  1）translateX()-------------水平方向移动
  2）translateY()-------------垂直方向移动
  3）translate(参数)：参数的个数决定了移动的方向。
  参数个数为1的话，只能向水平方向移动
  参数个数为2个的话，第一个水平，第二个垂直

旋转函数

1）rotateX()-----------绕x轴旋转
2）rotateY()-----------绕y轴旋转
3） rotate()-----------绕中心旋转

可以调整旋转中心：transform-origin：x y
可以取值为关键词，可以取值为数值
一定要在初始效果中调整旋转中心

缩放函数

1）scaleX()---------沿着x轴缩放
2）scaleY()---------沿着y轴缩放
3）scale(参数)-----参数个数决定哪一个方向实现缩放
取值为一个参数的话，水平和垂直实现的缩放比值一样
取值为两个参数的话，第一个参数为水平，第二个参数为垂直

倾斜函数，倾斜的是一个度数

1)skewX()------沿着x轴倾斜
2)skewY()-----沿着y轴倾斜
3）skew()-----与x，y形成夹角。