变形和动画都是前端开发过程中，用来提高用户体验的一种方式。增加一些动效，可以使页面看起来不那么枯燥无味。
HTML5+CSS3系列课程
携程网首页-移动端
响应式布局实战之微加建站
校园官网考试实战项目
一、变形 transform
transform 属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
变形都是相对于自己本身原来的位置进行转换，原来的位置还占位，只是视觉上的变化。这点来看和相对定位有点类似。
1.1 2D 变形
2d中的坐标系：x 表示正方向向右 y表示正方向向下
-
translate(x,y) 偏移，值函数，两个参数分别为 x 方向和 y 方向偏移；如果只有一个值，就是代表向 x偏移
translateX (x)X 方向偏移
translateY (y)Y 方向偏移/* 向下偏移100px */ /* transform: translateY(100px); */ /* 向右偏移200px*/ /* transform: translateX(200px); */ /* 同时设置向下偏移100px向右偏移200px */ /* transform: translate(200px,100px) */ transform: translate(100px); -
scale(x,y) 缩放，两个参数分别为x方向和y方向缩放值；如果只有一个值，代表元素两个方向的缩放值
scaleX(x)X 方向缩放scaleY(y)Y 方向缩放/* x方向缩小一半 */ /* transform: scaleX(0.5); */ /* y方向变大一半 */ /* transform: scaleY(2); */ /* 设置x、y方向的缩放值 */ /* transform: scale(0.9,0.5); */ transform: scale(0.5); -
skew(x deg, y deg); 倾斜，定义沿着 X 和 Y 轴的 2D 倾斜转换
skewX()skewY()/* x方向倾斜30deg */ /* transform: skewX(30deg); */ /* y方向倾斜30deg */ /* transform: skewY(60deg); */ transform: skewX(30deg); -
rotate(z deg) 旋转 定义 2D 旋转，在参数中规定角度
rotateX() x轴旋转rotateY() y轴旋转rotateZ() z旋转，平面旋转/* x轴旋转30deg */ /* transform: rotateX(30deg); */ /* y轴旋转30deg */ /* transform: rotateY(60deg); */ transform: rotateZ(60deg)
1.2 改变变形中心点
transform-origin 属性允许您更改转换元素的位置
transform-origin: x-axis y-axis z-axis;
- x-axis 定义视图被置于 X 轴的何处。可能的值：left center right 固定值 百分比
- y-axis 定义视图被置于 Y 轴的何处。可能的值：top center bottom 固定值 百分比
- z-axis 定义视图被置于 Z 轴的何处。可能的值：固定值
注：2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
1.3 改变变形类型
transform–style 属性指定嵌套元素是怎样在三维空间中呈现，2D 变形 和 3D 变形，属性值如下
- flat 表示所有子元素在2D平面呈现
- preserve-3d 表示所有子元素在3D空间中呈现
1.4 3D 变形相关属性和属性值
3d中的坐标系：x 表示正方向向右 y表示正方向向下 z表示垂直于屏幕
perspective景深，表示距离屏幕多少像素translate3d(x,y,z)translateZ(z)属性表示元素沿着自身Z轴移动了多少像素scaleZ(z deg)
注意：3d 变形需要配合景深使用，给父元素添加 perspective 属性
父元素{
prespective: 101px; // 表示父元素距离屏幕101px的距离，类似于看戏时确定舞台的距离
}
子元素{
transform: translateZ(100px); // 表示子元素从距离屏幕101px的位置，移动到了距离屏幕1px的位置
}
1.5 背面不可见
backface-visibility : visible(默认，背面可见) | hidden(背面不可见);
二、过渡 transition
过渡是从一种效果到另外一种效果的演变，需要触发条件，如：鼠标滑过 获取焦点 点击事件等等
两个必要的条件：
过渡属性 transition-property
过渡的时间 transition-duration
除了以上两个属性：
过渡的作用曲线 transition-timing-function
过渡的延迟时间 transition-delay
三、动画 animation
动画也是从一种效果过渡到另外一种，这个不需要任何触发条件，自动播放；
两个必要条件：
animation-name 动画的名称
animation-duration 动画的过渡时间
其他属性：
animation-delay 动画延迟播放的时间
animation-timing-function 动画的播放速率，属性值同transition-timing-function
animation-iteration-count 设置动画的播放次数；可以给数字，如果设置为infinity 代表无限次播放
animation-direction 设置动画播放的方向，属性值如下：
normal 正向播放
reverse 反向播放
alternate 奇数次正向播放，偶数次反向播放
alternate-reverse 偶数次正向播放，奇数次反向播放
animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 属性值 forwards 保留动画最后一帧效果
动画集规则：
@keyframes name{
from{}
to{}
}
注意：由于form…to 过渡效果太少，一般我们会利用百分比 0% ， 10%，…,90%,100%呈现更加细腻的动画过程
@keyframes name{
0%{}
10%{}
...
90%{}
100%{}
}
动画简写属性
animation:name duration delay timing-function iteration-count direction;
控制动画的播放状态
animation-play-state: running (默认运动) | paused (停止) ;
如：设置鼠标滑过容器停止动画的播放
