[TOC]
css 属性-transform
CSS transform 属性允许对某一个元素进行某些形变, 包括旋转，缩放，倾斜或平移等。 并非所有的盒子都可以进行 transform 的转换（通常行内级元素不能进行形变） transform 对于行内级非替换元素是无效的
常见的函数 transform function 有：
- 平移：translate(x, y)
- 缩放：scale(x, y)
- 旋转：rotate(deg)
- 倾斜：skew(deg, deg)
位移 - translate
平移：translate(x, y)
- 这个 CSS 函数用于移动元素在平面上的位置。
- translate 本身可以表示翻译的意思，在物理上也可以表示平移；
值个数:
- 一个值时，设置 x 轴上的位移
- 二个值时，设置 x 轴和 y 轴上的位移
值类型：
- 数字：100px
- 百分比：参照元素本身（ refer to the size of bounding box ）
缩放 - scale
缩放：scale(x, y)
- scale() CSS 函数可改变元素的大小。
值个数
- 一个值时，设置 x 轴上的缩放
- 二个值时，设置 x 轴和 y 轴上的缩放
值类型：
- 数字：
- 1：保持不变
- 2：放大一倍
- 0.5：缩小一半
- 百分比：百分比不常用
旋转 - rotate
旋转：rotate(<angle>)
值个数
- 一个值时，表示旋转的角度
值类型：
- 常用单位 deg：旋转的角度（ degrees ）
- 正数为顺时针
- 负数为逆时针
transform-origin
transform-origin：形变的原点
- 比如在进行 scale 缩放或者 rotate 旋转时，都会有一个原点。
- 一个值： 设置 x 轴的原点
- 两个值： 设置 x 轴和 y 轴的原点
- 必须是<length>，<percentage>，或 left, center, right, top, bottom 关键字中的一个
- left, center, right, top, bottom 关键字
- length：从左上角开始计算
- 百分比：参考元素本身大小
倾斜 - skew
倾斜：skew(x, y) 函数定义了一个元素在二维平面上的倾斜转换。 值个数
- 一个值时，表示 x 轴上的倾斜
- 二个值时，表示 x 轴和 y 轴上的倾斜
值类型：
- deg：倾斜的角度
- 正数为顺时针
- 负数为逆时针
倾斜的原点受 transform-origin 的影响
垂直居中总结
flex 布局
绝对定位
定位+ transform
transition 动画
什么是 transition 动画呢？
- CSS transitions 提供了一种在更改 CSS 属性时控制动画速度的方法。
- 可以让 CSS 属性变化成为一个持续一段时间的过程，而不是立即生效的；
- 比如将一个元素从一个位置移动到另外一个位置，默认在修改完 CSS 属性后会立即生效；
- 但是我们可以通过 CSS transition，让这个过程加上一定的动画效果，包括一定的曲线速率变化；
通常将两个状态之间的过渡称为隐式过渡（implicit transitions），因为开始与结束之间的状态由浏览器决定。
CSS transitions 可以决定
- 哪些属性发生动画效果 (明确地列出这些属性)
- 何时开始 (设置 delay）
- 持续多久 (设置 duration)
- 如何动画 (定义 timing function，比如匀速地或先快后慢)
transition CSS 包括
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
transition-property：指定应用过渡属性的名称
- all：所有属性都执行动画；
- none：所有属性都不执行动画；
- CSS 属性名称：要执行动画的 CSS 属性名称，比如 width、left、transform 等；
transition-duration：指定过渡动画所需的时间
- 单位可以是秒（s）或毫秒（ms）
transition-timing-function：指定动画的变化曲线 变化曲线
animation 动画
CSS Animation 的使用分成两个步骤：
- 步骤一：使用 keyframes 定义动画序列（每一帧动画如何执行）
- 步骤二：配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等
CSS animation 属性
- animation-name 指定执行哪一个关键帧动画
- animation-duration 指定动画的持续时间
- animation-timing-function 指定动画的变化曲线
- animation-delay 指定延迟执行的时间
- animation-iteration-count 指定动画执行的次数，执行 infinite 表示无限动画
- animation-direction 指定方向，常用值 normal 和 reverse
- animation-fill-mode 执行动画最后保留哪一个值
- none：回到没有执行动画的位置
- forwards：动画最后一帧的位置
- backwards：动画第一帧的位置
- animation-play-state 指定动画运行或者暂停（在 JavaScript 中使用，用于暂停动画）
