一.变形（2d）/转换相关的css属性（transform）
transform：none/2d-3d-func;
transform:func1() func2() func3();
1.指定变形的原点
transform-origin: left/center/right /%/lenght(第一个取值) top/center/bottom/%/length（第二个取值）;
2.位移
translate（x）/translate(x,y) 位移函数 eg: transform:translate(50px ,50px);
translateX(x) /translate(y） 只在水平或垂直方向上移动
3.缩放
scale（x）/scale（x,y） 缩放函数，参数是一个百分比的小数，如1表100%，0.5表50%，2表200%
eg: transform:scale(0.5)
scaleX(x)/scaleY(y) 只在水平或竖直方向上缩放
4.旋转
rotate(deg) 旋转变形 eg: transform:rotate(45deg) 顺时针旋转45度
5.倾斜
skew（x）/skew(x,y) 倾斜 参数为角度值
skewX(x) 逆时针/ skewY(y) 顺时针
浏览器的兼容性：
Firefox 浏览器写成 “-moz-transform”
Safari,Chrome 写成 “-webkit-transform”
opera 写成 “-o-transform”
二.过渡效果（transition） 由一个状态慢慢的变化到第二个状态
1.定义过渡的元素（针对属性）
transtion-property :none /all/ p1 p2;
2.定义持续的时间
transition-duration:100ms/3s;
3.定义速度效果的速度曲线
transition-timing-function:linear/ease/ease-in/ease-out
4.定义延迟时间
transition-delay:100ms/3s;
transition属性：property、duration、timing-function、delay（可按此顺序一次性定义）
示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多渡效果</title>
<style>
div{
width:200px;
height:200px;
border:1px solid #000;
background-color:#fff;
/*哪个属性应该应用过渡效果*/
transition-property:all;
/*过渡效果持续的时间*/
transition-duration:1s;
/*多渡进程的速度函数*/
transition-timing-function:linear;
/*过渡效果延迟多久开始进行*/
transition-delay:0s;
/*也可合并写成*/
/*transition:all 1s linear 0s;*/
}
div:hover{
background-color:#f00;
/*transform:translate(500px);*/
transform:rotate(360deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
注意：所有的变形效果都不会释放或改变原始占用的空间！--与相对定位有点类似。
三、帧动画（@keyframes,animation）
1. 帧动画：在一段比较短的时间内，连续的展示一系列内容变化的图片，就可以实现一个动画的效果；其中的每张图片称为一个“针”；电影播放时1s会播放16帧相关的图片。
2. 补间动画：只要指定动画变化过程中的“关键帧（keyframe)”，两个关键帧中间的过渡帧由系统来自动填充若干个补间帧。
css可以使用animation属性实现上述的补间动画效果。
3.动画的声明与调用
<style>
/*定义一个关键帧集合——一个动画*/
@keyframes （规定用于声明动画）myAnim1(动画名称){
/*帧：用于分解动画动作，每个帧代表某个时间点，定义每个帧上的动作*/
0%/form{....../*起始关键帧*/
}
40%{
......
}
80%{
......
}
100%/to{
....../*结束时的关键帧*/
}
</style>
/*调用动画*/
(需要调用动画的元素)div{
-webkit-animation: myAnim1 (动画名) 4s(持续时间);
}
实例：
<style>
@-webkit-keyframes VAnimj{
0%{
transform:translate(0);
}
45%{
transform:translate(0,200px);
}
100%{
transform:translate(300px,0);
}
}
img{
-webkit-animation:VAnim 4s;
}
</style>
4.什么是动画：过渡属性只能模拟动画效果；animation属性可以制作类似Flash动画。（通过关键帧控制动画的每一步，使元素从一种样式逐渐变化为另一种样式，实现复杂的动画效果）
5.浏览器兼容性：
——最新版本支持良好
——Chrome和Safari需要前缀-webkit-
——Firefox需要前缀-moz-
——Opera需要前缀 -o-
6.与动画调用相关的css属性
（1）animation-name:动画名称，即某个@keyframes后声明的动画名。
（2）animation-duration：动画的持续时间
（3）animation-timing-function:动画播放的速度函数 linear/ease-in/ease-out/ease-in-out
(4) animation-delay:播放的延迟时间。
（5）animation-iteration-count： 2，3，infinite(无限次) 动画播放次数。
（6）animation-direction:播放方向。
normal：第二次播放时从第一帧重新开始。
alternate:第偶数次播放时从最后一帧倒序播放。
（7）animation-fill-mode:填充模拟
backwards:动画尚未开始时即处于第一帧的状态。
forwards:动画完后保持最后一帧的状态
both:上述二者的效果都要。
（8）animation-play-state：paused（动画处于暂停状态） running（动画处于运行状态）
（9）animation集合属性(按顺序指定)：name duration timing-function delay count direction
说明：过渡（transiton）可以看做一种特殊的动画（animation）--只有开始和结束两个关键帧。
四.css3提供的媒体查询（Media Query）技术
1.作用：根据客户端浏览设备的特性，有选择性的执行部分css
2.Media:指浏览网页的设备，如screen（pc,pad,phone）,print(打印机)，tv(电视)，projection(项目演示)，屏幕阅读机......
3.Query:查询出当前浏览设备的特性，如类型、宽度、高度、分辨率、色彩位深、方向、Orientation(LandScape-风景画，Portrait-肖像画)，根据这些特性，执行特定的css样式。
4.css3 Media Query有两种用法：（媒体查询语句）
（1）根据媒体的特性，执行不同的外部css：
<link media="screen and (min-width:768px) and (max-width:990px)"rel="stylesheet"href="xx.css">
这种方法有不足：客户端会不管媒体特性，请求所有的css文件。推荐使用下一种方式！
（2）根据媒体的特性，执行某段css中的部分内容：
@media screen and (min-width:768px) and (max-width:990px）{
h1{}
.box{...}
}