transform 和transition

做网页时候发现自己对transform，transition，translate概念搞混，好记性不如烂笔头，写下来加深印象。

transform（变形）
w3c定义是：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
有很多值：
translate（x，y）定义2D转换。
rotate（angle）定义2D旋转的角度。
scale（x，y）定义2D缩放转换。
perspective（n）为 3D 转换元素定义透视视图。设置屏幕与用户眼睛的距离，近大远小，只是视觉上的呈现作为一个属性，设置给父元素，作用于所有3D转换的子元素。

transform-origin 设置旋转元素的基点位置。（必须配合transform使用）

transform-style:可以让里面的子盒子保持3D效果，加给父盒子。同上，该属性也必须与transform属性一同使用。
值：
preseve-3d：让子盒子位于3D空间里
flat：子盒子被扁平化

transition（过渡）
w3c的定义：
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property ：规定设置过渡效果的 CSS 属性的名称。
transition-duration ：过渡持续时间
transition-timing-function：规定速度效果的速度曲线 linear 匀速 ease 减速
transition-delay：定义过渡效果何时开始
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。