标签：
css用于控制网页的样式和布局，而css3是最新的css标准
css3模块：
css3被划分为模块，其中最重要的8个模块包含：
选择器、框架型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面
选择器主要分4类：
兄弟选择器（相邻兄弟选择器、同用兄弟选择器）
属性选择器
伪类选择器（目标伪类、元素状态伪类、结构伪类、否定伪类）
伪元素选择器
背景和边框：
边框属性（创建边框的角度、阴影、形状）：
border-radius
box-shadow
border-image（IE不支持）
背景属性：
background-size:规定背景图片的尺寸
background-origin：规定背景图片的定位区域，图片可以放置于(值：border-box、padding-box、content-box)
background-image允许设置多个背景图像
background-clip:规定背景的描绘区域（值：border-box（默认值）、padding-box、content-box）
css3文本效果：（除以下两种，还有很多新的属性）
text-shadow:设置文本的阴影 ex:text-shadow:5px 5px 5px 5px #666;参数值分别是规定了水平阴影、垂直阴影、模糊距离、颜色
word-warp：该属性允许您允许的文本强制性进行换行，即这意味着会对单词进行强行的拆分
@font-face 规则：文本设计师可以使用他们喜欢的任何字体
ex:
<style>
@font-face{
font-family:myFirstFont;
src:url(‘Sansation_Light.ttf‘);
url(‘Sansation_Light.eot‘);
}
div{font-family:myFirstFont;}
</style>
2D/3D转换:
2D的转换方法：
transform():向元素应用2D或3D
transform-origin(x-axis,y-axis,z-axis):设置元素转换的基点位置（允许改变被转换元素的位置）
x,y的 值：
50% 50%(默认值)
left/center/right
length
%
z的值：length
translate(x,y):（位移像素）元素从其当前位置移动，根据给定的left(x)和top(y)两个的坐标进行设置
translateX(像素值);
translateY(像素值);
ex:
div{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px);//ie 9
-webkit-transform:translate(50px,100px);//safari and chrome
-o-transform:translate(50px,100px);//Opera
-moz-transform:translate(50px,100px);//Firefox
}
rotate(x,y):（旋转角度）元素顺时针旋转给指定的角度，允许负值，元素将逆时针旋转
rotateX(ndeg)
rotateY(ndeg)
注意：transform:rotateX(30deg)rotateY(30)rotateZ(30)中r
ex:rotateX、rotateY、rotateZ的顺序不同，效果也会不一样，因为它们三个方向的执行是有先后顺序的
而transform:rotate3d(1,1,1,30deg)与上面的效果也不相同，因为这种方法中的三个方向是同时执行的。
div{
transform:rotate(30deg,60deg);
-ms-transform:rotate(30deg,60deg);//ie9
-webkit-transform:rotate(30deg,60deg);//safair chrome
-moz-transform:rotate(30deg,60deg);//firefox
-o-transform:rotate(30deg,60deg);
}
scale(x,y):（比例缩放）元素的尺寸会增加或减少相应参数倍数，根据给定的宽度（x）和高度(y)参数增加或减少相应倍数
scaleX(number)
scaleY(number)
ex:
div{
transform:scale(2,4);
-ms-transform:scale(2,4);//ie9
-webkit-transform:scale(2,4);//safair chrome
-moz-transform:scale(2,4);//firefox
-o-transform:scale(2,4);
}
skew(x,y):（倾斜角度）元素翻转给定的角度，根据给定的；水平x和垂直y轴参数
skewX(ndeg);
skewY(ndeg);
ex:
div{
transform:skew(45deg,45deg);
-ms-transform:skew(45deg,45deg);//ie9
-webkit-transform:skew(45deg,45deg);safair
-o-transform:skew(45deg,45deg);
-moz-transform:skew(45deg,45deg);
}
matrix():允许将所有的2D方法组合在一起设置，所以该方法需要6个参数，包含数值函数，允许：旋转，缩放，移动、倾斜
ex: div{transform:matrix(0.886,0.5,-0.5,0.886,0,0)}//考虑浏览器兼容性问题，同样要根据不同的浏览器在transform属性之前加上对应的前缀
3D转换：
perspective(number px)：空间距离，人眼到3D投影到平面的距离。为3D转换元素定义透视视图，使用时要加对应浏览器前缀,该属性要定义在3D元素的父元素上
transform-style:该属性是要设置在3d显示元素的父元素中，
取值：flat值默认值，以2D元素的位置摆放元素的位置
preserve-3d，以3D位置摆放
backface-visibility:定义当元素不面对屏幕时是否可见（取值：visible（默认值）、hidden）
transform的参数函数与2D有点不同,其他与2D一样
位移(px)：translate3d(x,y,z)
translateZ();
旋转(deg):rotate3d(x,y,z)
rotateZ()
缩放(无):scale3d(x,y,z);
scaleZ();
倾斜(deg):skew3d(x,y,z);
skewZ();
组合：matrix3d()
过渡（transition）：
transition：在一定时间内平滑过渡，能够观察到变化过程和最后结果（非过渡只能观察到结果）
过度的；要素和属性
transition-property：指定要过度的css属性名称
取值：
none
All
property(具体属性名称，多个属性以逗号分开)
transition-duration： 过渡时长，‘以s|ms为单位该属性必须设置
取值：
number s|ms
transition-timing-function: 过渡时间曲线
ease 默认值，慢速开始，快速变速，快速结束
Linear 匀速
Ease-in 慢速开始，加速效果
Ease-out 快速开始，减速效果
Ease-in-out 慢速开始和结束，先加后减
transition-delay：过渡时延
取值：number s|ms
简写：transition：propertyValue durationValue timing-functionValue delayValue
总结一般可以设置过渡的属性(即transition-property的属性值)：颜色属性、取值为数值的属性、转换属性transform、渐变属性、visibility属性、阴影box-shadow
animation动画：是一种元素从；一种样式逐渐变化成另一种样式的过程
标签：
原文地址：http://www.cnblogs.com/ldjgo/p/5926745.html
