CSS3增加的属性

精灵图（sprite）
CSS精灵图是将网页中一些小的背景图片整合到一张大图中（精灵图），网页需要其中的某一个小图标，只需要定位到该区域即可

优点：
1.用户访问页面时，网页只需要向服务器发送一次请求，大大的提高了页面的性能
2.只需要加载一张图片，浏览页面时加载的更加快速

使用精灵图用到的属性：
background-image：使用精灵图的路径
background-repeat：no-repeat; 不平铺
background-position：用来精确定位所需背景图片的位置

2D转换
2D转换是改变元素在二维平面上的位置和形状
移动

transform: translate(x,y);         //第一个值沿着X轴进行移动，第二个值沿着Y轴移动
transform: translateX();		   //沿着X轴方向移动
transform: translateY();		  //沿着Y轴方向移动 		

2D移动主要指水平，垂直方向上的移动，不影响其他元素的位置，对行内标签没有效果

旋转

transform: rotate(xxdeg)        //xx为旋转的角度值，deg为单位
/*
*	顺时针方向旋转为正，逆时针旋转方向为负
*
*/
/*设置元素旋转中心点
*	默认旋转中心点为元素的中心（50% 50%），等价于（center center），
*	也可以设置像素（px）或者方位（left，top，center等）
*/
transform-origin: left top;    //设置旋转中心点为左上角

缩放

transform： scale(x,y);
/*	 x y用逗号隔开，以数值表示，数值为多少
*	则x和y则相对应数值缩放多少倍。如果只写一个参数，则默认第二个参数和第一个参数一样
*	也可以改变中心点进行缩放，默认以元素中心点缩放。缩放时不影响其他元素的位置
*/

若要进行多个转换，格式为：
transform：translate（） rotate（） scale（）；
注意
顺序会影响转换的效果，一般多个转换时，先平移再旋转

3D转换
三维坐标系：
x轴：水平向右 X轴右边为正值，左边是负值
Y轴：垂直向下 Y轴下面是正值，上面是负值
Z轴：垂直屏幕 越靠近屏幕外正值越大，越往屏幕里面走负值的绝对值就越大

transform: translate3D(x,y,z);       //3D位移
trandform: rotate3D(x,y,z);			//3D旋转，单位为deg

透视（perspective）
视距（透视的值）要写在被观察元素的父级元素中
只有给了视距后才能感觉到translateZ的变换效果

3D呈现（transform-style）
控制子元素是否开启三维立体环境

transform: flat;		//默认。子元素不开启3D立体空间
transform: preserve-3d;    //子元素开启立体空间

过渡（transition）

transition: all .5s;			//表示过渡所有的效果，并且在0.5s内完成
transition-property:			//要过渡的属性
transition-duration:			//过渡完成的时间
transition-function:			//时间曲线（运动曲线）
transition-delay:				//规定何时开始
/* 想要哪个元素实现过渡动画的效果，把transition属性写在该元素中 */ 

动画（animation）

/* 定义动画 */
@keyframes 动画名称 {
	0% {
		
	}
	100% {
		
	}
}

/* 使用动画 */
div {
	animation-name: 动画名称;		/* 调用动画 */
	animation-duration: 持续时间;	/* 持续时间 */
}

动画序列：

1. 0%是动画的开始，100%是动画的完成
2. @keyframes中规定某项CSS样式，当创建当前样式逐渐改为新样式的动画效果
3. 动画是使元素从一个样式逐渐变化为另一个样式的效果，可改变任意多的次数
4. 用百分比来规定变化发生的时间，或用from和to，等同于0%和100%

动画常见的属性：
@keyframes 规定动画
animation 所有动画属性的简写属性，除了animation-play-state属性
animation-name 规定的@keyframes的动画名称（必需的）
animation-duration 规定动画完成一个周期花费的时间，默认为0（必需的）