12.16

过渡

transition 过渡
定义：元素从一个状态到另外一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见。
css3新增了过渡这个属性，可以实现元素不同状态之间的平滑过渡。
transition-property:指定过渡的属性。 all为指定所有属性都有过渡效果。 必须
transition-duration: 过渡的时间，单位可以是s或者ms。 必须
transition-delay:指定过渡生效的延迟时间。
transition-timing-function:
ease 慢慢减速
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
过渡属性 完成时间 运动曲线 延迟时间
transition：all 3s linear 1s;
一般有数值/中间状态的属性才可以设置过渡，比如：width，height

2D转换

缩放，位移，旋转，倾斜
transform 属性。
缩放：
放大缩小。
格式：
transform：scale(x,y);
x:代表水平方向的缩放倍数
y：代表垂直方向的缩放倍数。
如果只写一个值，代表等比例缩放。
不会改变真实宽高，也不会旁边的盒子造成影响。

转换位移

定义：translate()方法将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。
对于位移translate()方法，我们分为3种情况：
（1）translateX(x)：元素仅在水平方向移动（X轴移动）；
（2）translateY(y)：元素仅在垂直方向移动（Y轴移动）；
（3）transklate(x,y)：元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动）；
格式：
tramsform：translate（水平位移，垂直位移）
属性值：
px 正值：向右或向下。
百分比 是按照盒子本身的宽高。
只写一个值时，是水平位移。
分析：
其实，单纯地对某个元素设置位移是没有太多实际的意义。位移translate()方法一般都是结合CSS3动画一起使用，从而实现上下左右移动的动画效果。
对于移动动画效果，使用animate()方法也可以实现，不过jQuery实现位移比CSS3实现来得麻烦，这是因为jQuery要想实现移动动画效果，对位移的元素还得必须设置position属性。但是CSS3的translate()方法则不用那么麻烦。

旋转

旋转：rotate
格式： transform：rotate（角度）
单位：deg
transform-origin: 变换原点
格式： transform-origin: 水平坐标 垂直坐标
px
百分比 按照盒子的宽高。50%=center
单词 left center等
transform 后面可以书写多个转换，但是书写顺序不同，效果不同。
对于
transform: translate(100px) rotate(90deg);
transform:rotate(90deg) translate(100px) ;
第一种会先位移，再旋转
第二种会先旋转，再位移。

3D旋转-位移

3D旋转：
transform: rotate3D(x,y,z,deg);
x,y,z 是一个0/1的数值，0表示不旋转，1表示旋转，deg表示旋转的角度。
rorateX，X轴旋转
rorateY，Y轴旋转
rorateZ Z轴旋转
定义： 旋转的方向：左手法则
左手握住旋转轴，大拇指指向旋转的正方向，其他手指的卷曲方向就是旋转的正方向。
perspective：
设置给变换盒子的父容器。
透视：
设置用户眼睛与屏幕的距离。
透视效果只是视觉上的呈现，不是真正的距离。
注：
translateZ为正值，perspective值越小，盒子与你的距离越近，看到的效果也就越大
translateZ为0，perspective不管怎么变化，盒子上的阴影不变，看到的效果不变。
translateZ为负值，perspective值越小，盒子与你的距离越近，看到的效果也就越小。

transform: translateX(); 沿着x轴移动
transform: translateY();沿着Y轴移动
transform: translateZ();沿着Z轴移动
transform: translate3d(x,y,z);

反面隐藏：
backface-visibility: hidden;

倾斜

格式：transform：skew（水平倾斜角度，垂直倾斜角度）
单位是deg，正值 顺时针，负值逆时针。

注：所有的转换属性，只能添加给块级元素，行内元素无效。